Downshift: Improve hover/highlight behaviour

[vfatia]

Presently, when hovering a menu built with downshift the highlight gets "sticky" when the cursor moves away from the menu.

The ideal behaviour is that only the highlight triggered from a keyboard would be sticky, while a hover highlight would be dismissed when a cursor moves away. A good example of this is the macOS menus.

[kentcdodds]

Hi @vfatia, you can definitely build this yourself with the current features that downshift has available. Give it a try :)

[vfatia]

@kentcdodds Yup! I have no doubts about it… just didn't want to go even deeper into the customisation route (although that's the best part of Downshift).

Happy to add it on my end for the time being, but it would be nice to see on core 😉

[kentcdodds]

I understand why you might feel that way, but most people using downshift won't need that feature and I'd prefer to avoid putting code in core that most people won't use especially when building it yourself is relatively trivial. Otherwise we'll be increasing the bundle size for 99% of people for the small benefit of 1% of people.

[kentcdodds]

That said, I'd love it if you could add what you build to the examples! But I'll go ahead and close this issue for now. Thanks!

[jonas-arkulpa]

For future reference:
Had the exact same need and found a really easy solution.
On the wrapper/menu: onMouseLeave: () => setHighlightedIndex(null)

[vfatia]

That's such a simple solution! Thanks @jonas-arkulpa

I'm actually building a component to browse and search a list of items. Still a typeahead but of different sorts… I will add the full component into the examples later on.