<label><select></label> doesn't open when clicked

[rstacruz]

I have something like this:

<label>
   <select id='x'>...</select>
</label>

new Choices(document.getElementById('x'))

But I can't click it. I can press spacebar on it just fine, though.

It seems like it opens the dropdown, then closes it immediately:

            } else if (this.passedElement.type === 'select-one' && target !== this.input && !this.dropdown.contains(target)) {
              this.hideDropdown(true);
            }

this is indeed !== this.input. and this.dropdown indeed doesn't have target:

What happens here is that two click events happen.

[jshjohnson]

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 🤔

[rstacruz]

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/

[rstacruz]

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.

[jshjohnson]

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

Interesting.

[rstacruz]

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

[jshjohnson]

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

[jshjohnson]

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

Thanks

[khawkins98]

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).

[DanielRuf]

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

Chrome 62 stable on macOS 10.12

[jaschaio]

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

[jshjohnson]

Closed due to lack of information of browser.

[rstacruz]

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.

[DanielRuf]

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?).

[rstacruz]

wrapping it in label is valid according to W3C

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

[stale]

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.