everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
907 stars 47 forks source link

Fix useHover for edge-case where multiple onMouseEnter events are fired #101

Open Zyclotrop-j opened 6 months ago

Zyclotrop-j commented 6 months ago

When multiple onMouseEnter/onMouseExit events are fired (e.g., from original target + a child element) and you have a entry and/or exit delay an active timeout will be overwritten by the second one. This breaks all logic that later unsets that timeout.

This issue leads to tooltips staying open when they shouldn't and erratic behaviours around timeouts including re-opening tooltips.

This PR fixes this edge-case behaviour by explicitly ignoring secondary enter/exit events.

This doesn't apply to touch-events, as these don't have timeouts and thus secondary such events can't overwrite previous ones as the state is final.