Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Vadimchesh opened this issue Jun 2, 2022 · 2 comments · May be fixed by #98
Open

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

Vadimchesh opened this issue Jun 2, 2022 · 2 comments · May be fixed by #98
Labels
bug Something isn't working

Comments

@Vadimchesh
Copy link

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 Vadimchesh added the bug Something isn't working label Jun 2, 2022
@tomasz89nowak
Copy link
Contributor

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
Copy link
Contributor

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 tomasz89nowak linked a pull request Oct 24, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants