react-laag
react-laag copied to clipboard
Fix useHover for edge-case where multiple onMouseEnter events are fired
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.