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:

here is the codesandbox link for bug I mentioned:

any help is appreciated

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

• javascript
• reactjs
• next.js
• mouseevent

• Maybe you should use EventListeners and cleanup function from UseEffect like in this example : Link – MB_ Commented Jun 16, 2022 at 18:28
• 1 @MB_ converted it to use addEventListener() and useRef() does not seems to make any differences, onMouseLeave still fails to trigger when mouse cursor hovers over the image rapidly ( horizontally ) – yeln Commented Jun 20, 2022 at 2:33

3 Answers 3

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 ponents (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

Great question I had a similar problem with one of my ponents 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()}
>

Bees

<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!

As Steffen Frank correctly pointed out, using DOM events is often risky...
I used another strategy using the React onMouseMove on the main container, in index.js

const [hoveredClasses, setHoveredClasses] = useState([]);

const handleMouseMove = (e) => {
  var x = e.clientX;
  var y = e.clientY;

  let elementMouseIsOver =
    document.elementFromPoint(x, y)?.closest(".c-justified-box") ||
    document.elementFromPoint(x, y)?.closest(".tooltip");

  let classes = elementMouseIsOver?.classList
    ? Array.from(elementMouseIsOver?.classList)
    : [];
  console.log(
    "[ c-justified-box ] > Mouse Move ----------------------------->",
    x,
    y,
    elementMouseIsOver,
    classes
  );

  // check if we need to cal setState
  if (
    (classes.length === 0 && hoveredClasses.length !== 0) ||
    !classes.every((classItem) => hoveredClasses.includes(classItem))
  ) {
    setHoveredClasses(classes);
  }
};

And

<main className={styles.main} onMouseMove={handleMouseMove}>

So on mouse move:

• we get the element under the mouse
• we check if that element classes are exactly the same as the classes we previously stored in state.

If no, we set the state with those classes. That triggers a redraw for the whole main ponent, so each of the JustifiedBox are also redrawn.

We are passing them the hoveredClasses array... so within each of them, a boolean is set to decide to show the modal or not.

const showFloatingDetailPanel = props.hoveredClasses.includes(
  props.new_Album.slug
);

Has you can see... We use the props.new_Album.slug which was already used as a div class for c-justified-box

className={"c-justified-box" + " " + props.new_Album.slug}

We just need to also pass it to the AlbumDetailsPanel as a props, to do the same with the modal main div.

JustifiedBox.js:

<AlbumDetailsPanel
  slug={props.new_Album.slug}
  t_ref={floating}
  //...
  

AlbumDetailPanel.js:

<div
  className={"tooltip" + " " + props.slug}

So every times the hoveredClasses do not match, we setState... And that state will be used by each ponent to decide to show their associated AlbumDetailsPanel. It is now impossible to have more than on shown.

And this simplifies everything in JustifiedBox.js, since we got rid of:

• handleAlbumMouseEnter
• handleAlbumMouseOut
• handleTooltipMouseEnter
• handleTooltipMouseOut
• the 3 useEffect

The updated CodeSandbox