adobe / adobe/react-spectrum

ComboBox: hitting enter when options are visible should select the first option.

Open
#6,275 6 comments 5 reactions 0 assignees View on GitHub
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

When using the [ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox.html#content), it's quite a common pattern that hitting the 'enter' key automatically selects the first option.

For example, [react-select](https://react-select.com/home) has this behaviour and is one of the most popular ComboBox libraries. Additionally [Material UI](https://mui.com/material-ui/react-autocomplete/) (with option `autoHighlight`), [Ant Design](https://ant.design/components/select), [Fluent UI](https://react.fluentui.dev/?path=/docs/components-combobox--default), [Headless UI](https://headlessui.com/react/combobox), [Blueprint](https://blueprintjs.com/docs/#select/suggest), and [W3's aria example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/) have this behaviour. (I actually couldn't easily find another library that doesn't support this).

If there is a way to do this easily with ComboBox already I'd love to know, but I think I've read the docs fairly closely and it doesn't seem obvious at least how to do this.

### 🤔 Expected Behavior?

When using a ComboBox, hitting enter while the popup is open selects the first result

### 😯 Current Behavior

When using a ComboBox, hitting enter while the popup is open cancels the selection

### 💁 Possible Solution

_No response_

### 🔦 Context

We're using the ComboBox in our web applications,

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

The issue names the React Aria ComboBox documentation but no source file or test; start by reading the linked ComboBox behavior and tracing how Enter is handled while its popup is open. Done means pressing Enter with visible options selects the first result instead of cancelling the selection, with coverage for that interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.