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

Add optional shouldFocusOnHover prop to aria combobox

Open p1pah opened this issue 1 year ago โ€ข 2 comments

No issue to close, but solves this discussion! https://github.com/adobe/react-spectrum/discussions/7045

โœ… 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.
  • [x] Updated documentation (if it already exists for this component).
  • [x] Looked at the Accessibility Practices for this feature - Aria Practices

๐Ÿ“ Test Instructions:

๐Ÿงข Your Project:

p1pah avatar Oct 09 '24 15:10 p1pah

Wouldn't this result in there being multiple highlighted items at once? e.g. one that you focused with the keyboard and one that you hovered over. By focusing the item on hover we ensure that there is only ever one highlighted item at a time. That matches the behavior of native <select>, menus, etc. Is the behavior you're looking to disable actually the selecting of an item on Tab rather than focusing on hover?

devongovett avatar Oct 10 '24 22:10 devongovett

@devongovett I'm looking to stop a use case where the user opens the menu, hovers over a item and then they decide tab out. Some of our users have found it confusing that if they are just hovering over something it's automatically selecting it for them :/. With the two highlighted items question, I think we would approach that with two different color shades (one to indicate keyboard selection and one to show mouse hover). This optional prop fixes all our woes our users were having with the mouse hover ๐Ÿคญ! Please let me know what you think

p1pah avatar Oct 15 '24 13:10 p1pah

@devongovett Something like this :) https://ariakit.org/components/combobox

p1pah avatar Oct 21 '24 15:10 p1pah

Any chance this could be considered/merged into next release ๐Ÿ˜„ ?

p1pah avatar Nov 06 '24 16:11 p1pah

I still feel like the better option would be to add a prop to prevent selecting the focused item on Tab, instead of tying this to hover only. As it is, this only prevents committing on tab if you previously hovered an item instead of using the keyboard. Seems like whether or not to commit on tab shouldn't depend on how you got to the item (hover or keyboard).

devongovett avatar Nov 18 '24 19:11 devongovett

I hear you, but that is the exact thing I want haha "only preventing committing on tab if you previously hovered an item instead of using the keyboard.". With the approach of committing vs. not committing on tab, would one just pass the current focused element and detect whether it's focused/hovered via data attributes?

p1pah avatar Nov 18 '24 20:11 p1pah