react-spectrum
react-spectrum copied to clipboard
Auto focus the first item within Combobox when the filtered items change
Closes #8007
This PR gets the ball moving for #8007. As mentioned in the issue, users sometimes get confused after typing a query in a ComboBox and hitting enter only to have the suggestions menu close (even if it's an exact match). I think it makes sense to auto-focus the first suggestion when the query text changes:
After: https://github.com/user-attachments/assets/6eebe44f-32c4-4a12-a2b8-2b52831a8174
Before: https://github.com/user-attachments/assets/f079bb21-84be-4232-b78c-23db2a404a57
There's a few discussion points:
- Should a
disableAutoFocusFirstprop be added, as inAutocomplete? This will change API. - What unit tests should be added
✅ Pull Request Checklist:
- [X] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
I'm using the React Aria Components/ComboBox/Combo Box Example story. (packages/react-aria-components/stories/ComboBox.stories.tsx). Type the character F, Foo is not automatically focused. Additionally, type Foo and hit enter - window closes, despite an exact match with the first suggestion.