I need to create a part of a form where if you click on a select, a checkbox field should popup and if you click anywhere else again, this field should disappear. I would like to do this with focusing the field after clicking on the select, but for some reason, my checkbox field loses its focus not only when you click anywhere else out of it, but even when you click on a label of a checkbox INSIDE of it. So the problem is that I am focusing an element in which I click on a label and the focused parent element loses its focus for some reason I can not figure out.

The code: /

Any helps appreciated!

P.S.:

Just some bonus question :) As you can see, if you click on the select input, my hidden checkbox section is displayed a little late, it is not shown instantly which looks a little bad. Any tips how to optimize this?

EDIT: I use Firefox 13.0.1

I need to create a part of a form where if you click on a select, a checkbox field should popup and if you click anywhere else again, this field should disappear. I would like to do this with focusing the field after clicking on the select, but for some reason, my checkbox field loses its focus not only when you click anywhere else out of it, but even when you click on a label of a checkbox INSIDE of it. So the problem is that I am focusing an element in which I click on a label and the focused parent element loses its focus for some reason I can not figure out.

The code: http://jsfiddle/RELuL/2/

Any helps appreciated!

P.S.:

Just some bonus question :) As you can see, if you click on the select input, my hidden checkbox section is displayed a little late, it is not shown instantly which looks a little bad. Any tips how to optimize this?

EDIT: I use Firefox 13.0.1

• javascript
• jquery
• jquery-events

• So is this form a select or checkbox, and why do you change it? – jasssonpet Commented Jun 22, 2012 at 10:12
• It is a select, but if clicked on it, it has to popup this checkbox box. It is a task I have to do, I dont agree with the method, but it must be done like this. – skywlkr Commented Jun 22, 2012 at 10:16
• Stupid question - why do you do this instead of using a plain multi-slectbox or those checkboxes directly? Don't make it more plicated than necessary. – Christoph Commented Jun 25, 2012 at 8:53
• As I have said in my last ment: "It is a task I have to do, I dont agree with the method, but it must be done like this." – skywlkr Commented Jun 25, 2012 at 9:03
• @skywlkr Question answered and bonus too :) – AbstractChaos Commented Jun 25, 2012 at 12:26

2 Answers 2

When you click on a <label>, the browser focuses the associated input field. So focus leaves the parent and goes to the checkbox (and your blur event handler is called).

Instead of focusing the parent div and relying on it being blurred, attached a click handler to the document:

$(document).click(function() {
    multiSelectUpdate();
});

$('.multiselect.container').click(function(event) {
    event.stopPropagation(); // prevent click event from reaching document
});

Also, in Webkit clicking on <select> doesn't fire a click event. A workaround is to use the focus event instead.

Demo

Ok two simple changes got this working first change the click listen on the select box to a mousedown listener like so.

 $('.multiselector').mousedown(function(event) {
        event.preventDefault();
        currentMulti = $(this).attr('id');
        thisOffset = $(this).offset();
        $(this).hide();
        $('#' + currentMulti + '-container')
            .css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus();
        $(this).addClass('active');
    });

this triggers before the box is able to es up so it never shows.

Secondly the blur listener was believing it lost focus when a child got focus to fix this change to focusout.

 $('.multiselect.container').focusout(function() {
        multiSelectUpdate();
    });

This only fires when the selector loses focus even focus currently on child of selector.

Fixed fiddle

enjoy :)

EDIT

For some reason blur fires multiple times on FF so to work round this use instead of blur mouseleave.

$('.multiselect.container').mouseleave(function() {
        multiSelectUpdate();
    });