<label><select></label> doesn't open when clicked about choices HOT 15 CLOSED

I see the same issue. When it is wrapped in the label it does not work.

Chrome 62 stable on macOS 10.12

from choices.

It immediately closes because the focus is no longer on the actual input, it is on the label (as far as I know). By testing whether the passed input is wrapped within a label, this could be resolved. I'm just wondering whether it is a normal pattern wrapping a select input within a label? I've not come across that before 🤔

from choices.

Yes it is! w3 spec recommends it, and has many examples of it:

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
https://dev.w3.org/html5/spec-preview/the-label-element.html

It lets the entire label + input + the box around it be clickable to focus on the input.

ALA says it's a good practice to do: http://www.alistapart.com/articles/prettyaccessibleforms/

from choices.

Afaik it works like this: clicking a label triggers a click on the input. So when you click an input in the label, it triggers a click for input and for label.

from choices.

Ah that seems to behave the same as supplying a for attribute: https://www.w3.org/wiki/HTML/Elements/label

Interesting.

from choices.

Thanks so much by the way for choices. I've been fed up with Select2 for a while :-)

from choices.

I'm glad you like it!

I've just tried wrapping a multiple select element within a label on Chrome and it worked fine. Would you mind sending me your browser details please?

Thanks

from choices.

Hey, any chance you could send me your browser details please?

Thanks

from choices.

We've noticed this (or similar issue as well).

In short, when wrapping a select with a label, you can only click the label to open the select box.

Observations:

• Choices seems to receive the click, but (as you stated) looses focus.
• Keyboard navigation works fine.

Here's a codepen: https://codepen.io/khawkins98/pen/aWBOwP

Any initial thoughts/suggestions?

Tested in Chrome 57, FireFox 52 (Mac).

from choices.

Got the same issue, not sure why this issue has been closed? @jshjohnson

from choices.

Closed due to lack of information of browser.

from choices.

Hey friends, the workaround is to not nest your select elements inside a label. Instead, use <label for="someid"> in conjunction with <select id="someid">. Not the most ideal solution, but it should at least be a somewhat clean workaround.

from choices.

Hey friends, the workaround is to not nest your select elements inside a label. Instead, use in conjunction with . Not the most ideal solution, but it should at least be a somewhat clean workaround. Sure but this is not always the case and also wrapping it in label is valid according to W3C (afaik?).

from choices.

wrapping it in label is valid according to W3C

Yes it is, but Choices.js doesn't support this at the moment.

from choices.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from choices.