Select: deselecting an option when selectionMode="single"
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
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](https://react-aria.adobe.com/ListBox), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select)). 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_
Contributor guide
Research direction
Start by comparing the Select behavior with the ListBox documentation for selectionMode="single" and disallowEmptySelection={false}. Decide whether empty selection or a placeholder option is the intended behavior; done means clicking the selected item clears the selection and restores the Select placeholder text.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100