`onMouseLeave` can be unreliable in Chrome

See this jsfiddle: https://jsfiddle.net/tvxderw3/

In Chrome, as you quickly move your mouse up and down the list, you’ll notice that some get stuck in the hover state. This works fine in Safari, and works in Chrome if you use a stable key between the hover states. I think mouseout somehow isn’t firing if the underlying DOM node is replaced by a new one in the same tick, but it’s odd that this is a Chrome-only bug.

[DamianDobrev]

I managed to “fix” this. I’m doing two things:

1. Added the listener to element which is not display: inline;, rather block/inline-block.
2. Added pointer-events: none to any containers of SVGs inside the element with the listener.

Seems to work fine now, the event is fired properly. I do not know why though.

[yardenapp]

I fixed this by invalidating the hover state between renders

// Inside your component
const divRef = useRef();
const [hovered, setHovered] = useState();
 
if(hovered && divRef.current && divRef.current.matches(':hover') === false)
    setHovered(false);

return (
    <div ref={divRef} onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)}/>
)