adobe / adobe/react-spectrum

Select: deselecting an option when selectionMode="single"

Open
#9,658 3 comments 1 reaction 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.