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

[danielgavrilov]

Provide a general summary of the feature here

Autocomplete has a disableAutoFocusFirst property 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:

react-spectrum/packages/@react-aria/autocomplete/src/useAutocomplete.ts

Lines 167 to 178 in 3c9b36a

	let onChange = (value: string) => {
	// Tell wrapped collection to focus the first element in the list when typing forward and to clear focused key when deleting text
	// for screen reader announcements
	if (state.inputValue !== value && state.inputValue.length <= value.length && !disableAutoFocusFirst) {
	focusFirstItem();
	} else {
	// Fully clear focused key when backspacing since the list may change and thus we'd want to start fresh again
	clearVirtualFocus(true);
	}
	state.setInputValue(value);
	};

🔦 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.)

Screen.Recording.2025-03-29.at.14.10.35.mp4

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[abel-asfaw-rm]

+1 Did you ever find a solution / workaround for this @danielgavrilov ?

It would be great to have this feature for ComboBox