ComboBox: hitting enter when options are visible should select the first option.
- 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
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