Skip to content

feat: expose shouldFocusOnHover prop for ListBox #8171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

lucasweng
Copy link

Closes #7989

✅ Pull Request Checklist:

  • 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:

  • Added tests to cover shouldFocusOnHover behavior, including focusing options on hover and navigating via keyboard.
  • The "List Box Example" story in RAC storybook already has a working shouldFocusOnHover control to manually verify the behavior.

🧢 Your Project:

@uncvrd
Copy link

uncvrd commented May 11, 2025

Thanks for submitting this PR, I would also appreciate if this were merged. Here's my use case:

I'm using an autocomplete component with ListBox

I need to take advantage of the AutocompleteStateContext so I can access the focusedNodeId and display some additional content in a sidebar when an item is focused. (i.e. a details panel of more information of the focused item)

Since hovering doesn't enable focus on a listbox, the sidebar with the preview content wasn't updating via mouse unless I used the keyboard controls.

Adding this prop and using "ts-ignore" will work for now, but would make me feel comfortable knowing this is a supported type. 🙏

just as a sidebar, it took me quite a while to figure out that shouldFocusOnHover is added to certain hooks like useSelect and I couldn't figure out why my sibling listbox to my autocomplete was not behaving the same way as my listbox in my select for a while

and doubly confusing that the MenuItem Autocomplete (in the example docs) was receiving the focus props without being a select 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

RAC ListBox: consider exposing shouldFocusOnHover + keyboard navigation
2 participants