Tooltips crashing Chrome

[Vampiro]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
This is the standard issue template CodeSandbox with the tooltip prop added into the button.
https://codesandbox.io/s/primereact-test-forked-8619ry?file=/src/index.js

Current behavior
Tooltips will randomly cause an infinite loop and crash the browser.

Expected behavior
Browser doesn’t crash when tooltips appear.

Minimal reproduction of the problem with instructions
Move your mouse over an element with a tooltip several times.

primereact-tooltip-bug.mp4

Please tell us about your environment:
OS: Amazon Linux 2 (happens to multiple users). Note: Could not reproduce on Windows box.

• React version:
  16.8.0 (React version in PrimeReact issue template) and in 17 as well.

• PrimeReact version:
  7.2.0 (Happening on main PrimeReact webpage). Also happening in the CodeSandbox which appears to be on PrimeReact version 6.0.1.

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Google Chrome 99.0.4844.82 (64-bit). Has happened with lower versions of Chrome as well.
  Could not reproduce in Firefox 89.

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  All

[Named-export]

I noticed this as well. I run in to it daily.

[melloware]

OK I think this might be isolated to Amazon Linux as I have tested on all these OS and browser combinations...

Windows - Chrome -> OK
Windows - Edge -> OK
Windows - Firefox -> OK
MacOS - Chrome -> OK
MacOS - Safari -> OK
Ubuntu Linux - Chrome -> OK
Ubuntu Linux - Firefox -> OK

[melloware]

@Vampiro are you running Amazon Linux either on premises using virtualization, or in the AWS cloud, connecting through rdp.

Just trying to figure out if it is the virtualization causing the issue?

[Vampiro]

@melloware I'm running on Amazon Linux 2 with the MATE desktop environment in the AWS Cloud and connect to it via the Amazon Workspaces Client.

I don't recall seeing any console errors while this was happening. Can't today, but tomorrow I can try to get a breakpoint in somewhere that would perhaps indicate what might be going on.

[melloware]

Ahhh this is starting to make a lot more sense.

Also what host OS are you using(Windows, Linux, Android, IOS), in case that matters?

[Vampiro]

I am not sure what Amazon Workspaces uses to host the VMs from. I'm using Windows to launch the AWS client.

[Vampiro]

Tested a bit more today.

• In the same environment, the issue happens with PrimeNG tooltips as well.
• I added in a PrimeReact button with a tooltip into my own app and this issue happened a lot less frequently than when reproducing in the PrimeReact docs, though it did still happen. In the docs, I could reliably reproduce within a couple seconds each time.
• I added mouseenter and mouseleave event handlers to the button and saw that it will toggle between the two being fired indefinitely.
• Although it seems contrary to the above, in my app, the loop would sometimes break after a second or two and the browser would not crash. Other times it would go on till I killed the browser. I tried quite a bit more within the PrimeReact docs and it would always crash. Locally, I was running the most up to date versions of PrimeReact and React inside of Storybook.
• I tried to reproduce this again on Windows (not virtualized). The closest I got was that if I rest the cursor right on the edge of the button, it causes similar behavior, but never crashes the browser and stops immediately after I move away from the edge. Don't know if it's related or just a coincidence. Windows video attached.

tooltips-on-windows.mp4

[melloware]

I think I was leaning towards it's something to do with the virtualization using Amazon and the communication is somehow off notifying the window events or delayed slightly enough to cause the infinite loop.

It seems on native OS and hardware it's impossible to reproduce.

[Vampiro]

I think this is related to the issue that I see on non-virtualized Windows. That video from my last comment showed that if you hover over the border of the button on the side that the tooltip was on, it would cause a loop between mouseenter and mouseleave that would make the tooltip show/hide in rapid succession.

I tested a bit more and this does not occur on any side that does not have the tooltip. Put the toolitp on the left and then the left border has this problem.

I then took this information into the Amazon Linux virtualized environment and found that I can move over the button all day long without issue, but when I cross the border that has the tooltip on its side, there's a very real chance I get caught in the loop and crash. It might be because of the Linux/MATE gui environment, the hardware speed within that environment, or virtualization. The non-virtualized environment just seems to handle being on that border with a loop between mouseenter and mouseleave a little more gracefully (still spazzes, but doesn't crash).

I think there's a good chance that if the issue that presents in non-virtualized Windows was fixed, this issue may be as well.

[Vampiro]

Think this may perhaps be an issue with the tooltip slightly overlapping the button in some way. Tooltip comes up, mouse is over the tooltip instead, causing a mouseleave event. Tooltip goes away, now we're back over the button causing the tooltip to come back up, repeat.

Setting the following fixes the issue in non-virtualized Chrome for me as well as in the Amazon Linux 2 virtualized environment.

.p-tooltip {
  pointer-events: none;
}

Edit: Don't know if that's the fix you want or if you want to offset the tooltip to be farther off the elements. In some tooltip examples, you have tooltips that you want to hover over/interact with and blanket setting pointer-events to none perhaps wouldn't be good for those. I think this style will be a good workaround for me though for now.

[melloware]

OK but the problem I think with that solution of pointer-events: none; is it breaks the AutoHide example here on the showcase because now the tooltip cannot be clicked: https://primefaces.org/primereact/tooltip/

let me see if I can do something clever by only applying pointer-events:none in non-AutoHide scenario.

[melloware]

OK @Vampiro check out my PR!

[Vampiro]

@melloware Your PR fixed the issue in both the virtualized Amazon Linux 2 and non-virtualized Windows environments. Nice work!