[BUG] onHoverStart and onHoverEnd triggered multiple times when used with drag

EDIT: I’ve just tested this on Firefox and it works fine. The only appears only on Chrome and Edge (since it is Chromium as well). (Windows 10)

I needed to get access to the hover state of my motion component so I used onHoverStart and onHoverEnd to set the state accordingly. This worked as expected until drag is enabled, then after the first drag the hover state is triggered multiple times when the mouse is entering and exiting the element.

CodeSandbox Example: https://codesandbox.io/s/vigorous-wozniak-gninp?file=/src/App.tsx

1. Try without drag enabled and see the hover state triggers as expected as mouse hovers over the element
2. Enable drag. Drag once. Then use mouse to hover element. (Try entering from multiple sides with varying speeds)
3. hover state triggers multiple times

Here is a snippet of the example:

export default function App() {
  const [isHover, setHover] = React.useState(false);
  console.log(isHover);
  //After first drag, isHover state is triggered multiple times on enter exit element

  return (
    <div>
      <motion.div
        drag
        // drag={isHover}
        //if this is set, then hover no longer triggered multiple times.
        //However, sometimes drag will disconnect when moving mouse too fast
        style={{ backgroundColor: "red", width: 150, height: 150 }}
        onHoverStart={() => setHover(true)}
        onHoverEnd={() => setHover(false)}

        // onHoverStart={() => {
        //   console.log("hoverStart");
        //   setHover(true);
        // }}
        // onHoverEnd={() => {
        //   console.log("hoverEnd");
        //   setHover(false);
        // }}
      />
    </div>
  );
}

[ckwong90]

what is the point to set drag to true when hover ?

You are correct, in a normal use case, drag should just be enabled. I just tried playing around with the drag prop while trying to investigate and to nail down what is causing these extra triggers. (this is why it is commented out)

I’ve determined that in Chrome, when drag is enabled, onHoverStart and onHoverEnd fires multiple times after dragging the element once. Setting drag to the hover seems to fix these extra triggers.

The reason I’m using onHoverStart/onHoverEnd is because other components in the app will react its hover state.

[mattgperry]

Ideally I’d suspend event listeners simply by setting a flag while we perform the DOM measurements. But it looks like events are flushed asynchronously so I’ll probably need to do a little rewrite that lets us unsubscribe hover events from the DOM temporarily.