react-laag icon indicating copy to clipboard operation
react-laag copied to clipboard

[BUG] onMouseLeave event not firing when mouse is moved quickly in Firefox

Open Vadimchesh opened this issue 3 years ago • 2 comments

Describe the bug

The strange behaviour was only observed in Mozilla Firefox (Chrome, Safari and Microsoft Edge work fine). I have a table with multiply rows and multiply tooltips. Sometimes the onMouseleave event doesn't fire and most of the time I can see multiple tooltips when moving the mouse quickly. You can see this behaviour in the gif below.

Code

  const handleOnMouseEnter = () => {
        if (id === 'column8') {
            console.log('OnMouseEnter');
        }
    };
    
    const handleOnMouseLeave = () => {
        if (id === 'column8') {
            console.log('OnMouseLeave');
        }
    };

const [isOver, hoverProps] = useHover({ delayEnter: 400 });
   
    const { renderLayer, triggerProps, layerProps } = useLayer({
        isOpen: isOver,
        container: getPortalElement('TooltipPortal'),
        overflowContainer: true,
        placement,
        possiblePlacements: [
            'top-start',
            'top-end',
            'top-center',
        ],
        snap: true,
        triggerOffset: 4,
        auto: true,
    });

    const layer = isOver
        ? renderLayer(
              <StyledTooltip {...layerProps} role="tooltip">
                  {tooltip}
              </StyledTooltip>
          )
        : null;

    return (
        <StyledTooltipDecorator
            {...triggerProps}
            {...hoverProps}
            onMouseEnter={handleOnMouseEnter}
            onMouseLeave={handleOnMouseLeave}
            id={id}
        >
            {layer}
        </StyledTooltipDecorator>
    );
};

Expected behavior onMouseleave should fire every time

Screenshots 20

Browser / OS (please complete the following information):

  • OS: MacOC
  • Browser Mozilla Firefox
  • Version 100

Additional context When I inspected the console output, I noticed that the event mouseleave does not fire when I move the mouse quickly, mouseenter event fires always. I'm not exactly sure that the problem is associated with react-laag. Any help is greatly appreciated.

Vadimchesh avatar Jun 02 '22 11:06 Vadimchesh

I have the same issue on Chrome with the Tooltip component copied to my app 1:1 from here: https://codesandbox.io/s/basic-tooltip-problem-react-laag-j8w72. It's easier to recreate if you enable 6x CPU slowdown in the devtools.

tomasz89nowak avatar Sep 18 '23 14:09 tomasz89nowak

I've tested it in depth and this behaviour occurs in version 2.0.5. When I downgraded the lib to 2.0.0, it works as expected.

tomasz89nowak avatar Sep 19 '23 07:09 tomasz89nowak