Select: deselecting an option when selectionMode="single" #9658
Description
Provide a general summary of the feature here
My team needs a way to allow for deselecting a single-select Select.
Looking at the ListBox docs, I see that there's a disallowEmptySelection prop. When it's false and selectionMode="single", clicking on a selected item deselects it.
I'd really like for that to work when the ListBox is used in the context of Select.
I understand that native selects don't work like this, but they allow for a workaround of using the first option as a sort of placeholder text (see the first example on MDN). This lets users deselect a select by selecting that placeholder option. This probably isn't an ideal pattern, but it is common and somewhat expected.
The RAC Select allows for placeholder text, but it does not show up as an option in the ListBox. I can see the logic here! That was always sort of a hack. But it means that the RAC Select is caught in the middle.
🤔 Expected Behavior?
When: selectionMode="single" and disallowEmptySelection={false} (on the ListBox), clicking on a selected item should deselect the item and revert the Select to displaying its placeholder text.
😯 Current Behavior
When: selectionMode="single" and disallowEmptySelection={false} (on the ListBox), clicking on a selected item does nothing.
💁 Possible Solution
- Allow empty selection in Select; OR
- i.e. it works like the RAC ListBox (if not like native select)
- Allow for displaying the placeholder text as an actual option, following the common native html pattern for deselecting selects.
- i.e. it works like a native select (while encouraging a possibly problematic placeholder text pattern)
🔦 Context
Trying to build our design system's Select on top of the RAC components. The lack of this functionality is going to hurt adoption.
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response