Autocomplete: How to focus the first item on "Backspace"?

[lixiaoyan]

We'd like to have the same behavior as cmdk: always focus the first item on input change, for both typing and deleting characters.
Is there any proposed method for achieving this?

[snowystinger]

If I recall correctly, @LFDanLu correct me if I misstate, this is actually due to screen readers which wouldn't announce the change when deleting. In order to make it accessible, we had to forgo this behaviour and make it a deliberate choice to select the option again.

[lixiaoyan]

Thank you for the explanation; nevertheless, I am still curious if there is a way to manually control the focused menu item. I've read the documentation, but no luck.

[LFDanLu]

There isn't a way to control that behavior short of overriding the logic within

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

Lines 167 to 178 in a7b1a28

	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);
	};

. Perhaps you may be able to simulate the same kind of virtual focus/blur event but it might be a bit tricky ensuring it doesn't collide with the ones fired by the hook itself