[Select] component doesn't hide options when placed inside a <label> on mobile #3679
Description
Bug report
Something weird happens on mobile browsers when the SelectPrimitive.Root is mounted inside a <label>
Current Behavior
As a user browsing from a mobile phone, or in device mode with Chrome Devtools, when picking an option from the select component, my chosen option is picked and the options list remains opened.
Expected behavior
The options list should close when an option is picked until the select component is triggered again.
Reproducible example
CodeSandbox Template - the issue is reproducible when viewing the example from the device mode in brower DevTools.
Suggested solution
Additional context
The only workaround for using labels seems to be to keep them in a sibling relation to the select component, connecting them together via the htmlFor property. As it is reported in #3294 this breaks the semantic association between the label and the selector.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | "@radix-ui/react-select" | "2.1.3" |
| React | n/a | 18.3.1 |
| Browser | Google Chrome | 140.0.7339.133 |
| Assistive tech | ||
| Node | n/a | |
| npm/yarn/pnpm | ||
| Operating System | OS X | 15.6.1 (24G90) |