0
848
VisualizaçõesReact onMouseEnter and onMouseLeave bug, not working consistently
I am having issues with React onMouseEnter and onMouseLeave, sometimes the events are not firing when it should
I am using onMouseEnter and onMouseLeave to show/hide a React Portal Modal tooltip panel:
the issue:
if the mouse cursor hovers over the images slowly, onMouseEnter and onMouseLeave works as expected, but if the mouse cursor hovers over the image rapidly ( horizontally ), the code breaks, and multiple tooltip panels are shown ( because onMouseLeave failed to trigger )
here is the video link showing the issue: https://www.veed.io/view/7669d6c4-6b18-4251-b3be-a3fde8a53d54?sharingWidget=true
here is the codesandbox link for bug I mentioned: https://codesandbox.io/s/epic-satoshi-rjk38e
any help is appreciated
2 Respostas
Responde à pergunta0
The cause for the "lost events" is not the event listeners not firing. The problem is that you mix React code, which operates on the virtual DOM, with "classical" JS code, which operates on the browser DOM. These two DOMs are out-of-sync most of the time, which causes the hiccups that you see.
Try to remove all code that directly accesses the DOM and operate on React components (i.e. in the virtual DOM) only.
Here is an stripped-down example how to implement your tooltip in React-only style:
https://codesandbox.io/s/musing-villani-c0xv24?file=/src/App.js
0
Great question I had a similar problem with one of my components and global state management.
After looking at your code it looks you should add the onFocus and onBlur events.
Example
<div
onMouseOver={() => handleEnter()}
onMouseOut={() => handleExit()}
>
Becomes
<div
onMouseOver={() => handleEnter()}
onFocus={() => handleEnter()}
onMouseOut={() => handleExit()}
onBlur={() => handleExit()}
>
This also solves a problem of mobile not having the same mouse state.
Hope this helps happy coding!