everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
907 stars 47 forks source link

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

Open Vadimchesh opened 2 years ago

Vadimchesh commented 2 years ago

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):

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.

tomasz89nowak commented 1 year ago

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 commented 1 year ago

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.