<select> inside a <label>

[Korri]

On our website we had a few selects embed inside a label.

When you click the label it is supposed to focus the dropdown, but right now it doesn't do anything and worse, it prevents the dropkick from opening has it triggers a click event on the underlying , and then closes all the open dropkicks.

[wwilsman]

I've ran into this problem in the past, but forgot to open an issue on it. I eventually ended up refactoring my code to use the 'for' attribute on labels (and not nesting the select). The only solution to nesting inside of a label that I can think of would be to check if a dropkick element has an ancestor label and then opening the dropkick element when that label is clicked. This could get costly to check each ancestor on every document click to determine if there's a label and then if that label contains a dropkick element. A solution to that would be to perform the check on initialization and add a handler to any ancestor labels. However, programmatically adding labels or removing nested elements would require rebinding the handlers manually or recalling the initialization method.

Forget everything I just said. I went and did some testing and found that when you click on a label it triggers a second event from it's control element. A simple check to ignore this click makes the dropkick work as intended.

If you, or anyone can suggest more elegant solutions, or do tests to determine if the costliness of that check on every document click would be minimal, please feel free reply with your suggestion or results and I'll have it implemented asap.

[wwilsman]

I've edited my previous answer because I found a solution and will push it once I fix a similar issue with ancestor labels not focusing the dropkick element.

[wwilsman]

Check out develop to see if this fixes your issue.

[Korri]

Yep, works as expected now, awesome !