adobe / adobe/react-spectrum

ComboBox: autofocus on first list item when ListBox is filtered (matching Autocomplete behaviour)

Open
#8,007 2 comments 17 reactions 0 assignees View on GitHub
accessibility ComboBox 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

Autocomplete has a [`disableAutoFocusFirst` property](https://react-spectrum.adobe.com/react-aria/Autocomplete.html#props) which controls _"Whether or not to focus the first item in the collection after a filter is performed"_.

It would be nice to have this for ComboBox as well.

### 🤔 Expected Behavior?

ComboBox supports a `disableAutoFocusFirst` property.

### 😯 Current Behavior

ComboBox doesn't support a `disableAutoFocusFirst` property.

### 💁 Possible Solution

Not sure if a patch would be possible or easy. I tried to adapt the code from `useAutocomplete` but didn't get it to work: https://github.com/adobe/react-spectrum/blob/3c9b36ae9e9bb42792ac4b3a51121969ae8d579c/packages/%40react-aria/autocomplete/src/useAutocomplete.ts#L167-L178

### 🔦 Context

I implemented a ComboBox for a country select, and I noticed users sometimes press Enter to select their country, which doesn't work because the first List item is not focussed by default when filtering. (The input field is also reset after pressing Enter, which makes the experience a bit worse.)

https://github.com/user-attachments/assets/c810f213-ff4e-41e3-b7cd-4cd2de1eade1

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.