react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Auto focus the first item within Combobox when the filtered items change

Open widavies opened this issue 3 weeks ago • 1 comments

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 disableAutoFocusFirst prop be added, as in Autocomplete? 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.

🧢 Your Project:

widavies avatar Nov 16 '25 04:11 widavies