When choosing an item in a ComboBox, using mobile, labels in the background gets clicked.
🤔 Expected Behavior?
When an item in ComboBox is clicked and the list of items closes, no further actions should occur.
😯 Current Behavior
When clicking an item in the list of suggestions in a ComboBox, it acts as expected at first. After the item is selected and the list closes, a click/touch event fires and triggers an event on elements in the background. Also this seems to reset the selection in the ComboBox. The problem seems to occur only on mobile, and only when the background element is a label.
💁 Possible Solution
It could be that something needs to be changed in the event bubbling.
🔦 Context
In my case, there is a checkbox with a label below the ComboBox, and it is triggered whenever a user clicks an element in the list in the ComboBox. It causes the ComboBox' selected value to be reset and some items in the list cannot be selected at all.
🖥️ Steps to Reproduce
The easiest way to reproduce the bug is to add an input with a label after a ComboBox, like in this video:
devongovett
commented
12 months ago
Provide a general summary of the issue here
When choosing an item in a ComboBox, using mobile, labels in the background gets clicked.
🤔 Expected Behavior?
When an item in ComboBox is clicked and the list of items closes, no further actions should occur.
😯 Current Behavior
When clicking an item in the list of suggestions in a ComboBox, it acts as expected at first. After the item is selected and the list closes, a click/touch event fires and triggers an event on elements in the background. Also this seems to reset the selection in the ComboBox. The problem seems to occur only on mobile, and only when the background element is a label.
💁 Possible Solution
It could be that something needs to be changed in the event bubbling.
🔦 Context
In my case, there is a checkbox with a label below the ComboBox, and it is triggered whenever a user clicks an element in the list in the ComboBox. It causes the ComboBox' selected value to be reset and some items in the list cannot be selected at all.
🖥️ Steps to Reproduce
The easiest way to reproduce the bug is to add an input with a label after a ComboBox, like in this video:
https://github.com/adobe/react-spectrum/assets/45171785/b55e6ebd-181c-4458-82fd-cc5a8cfdba0d
Version
1.0.0-rc.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Android/Windows
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response