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

Tooltip: this.container is null on fast mouseover on PrimeNG demo page #15513

Closed
horizoncarlo opened this issue May 9, 2024 · 8 comments
Closed
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@horizoncarlo
Copy link

horizoncarlo commented May 9, 2024

Describe the bug

If you mouseover the 4 different inputs with tooltips attached on the current demo page (https://primeng.org/tooltip) the console is filled with "this.container is null" in the preAlign function in tooltip.

image

My guess is because the mouseover is rapid the appear animation on tooltip doesn't have time to complete, and when it does this.container is already dead from mousing back out

From what I can tell this is a recent regression not present in 17.16.0, likely due to #15485

Environment

Current live demo page with PrimeNG 17.16.1.

Reproducer

No response

Angular version

17?

PrimeNG version

17.16.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20?

Browser(s)

Firefox 125, Chrome 124

Steps to reproduce the behavior

  1. Go to https://primeng.org/tooltip
  2. Quickly mouseover the 4 input fields
  3. See error in the web console

Expected behavior

No error would be good :)

@horizoncarlo horizoncarlo added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 9, 2024
@jlorellana684
Copy link

jlorellana684 commented May 10, 2024

Im facing the same problem in my project

@majkers
Copy link

majkers commented May 14, 2024

I am also having this error when fast mouse movement:

zone.js:162 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at Tooltip.preAlign (primeng-tooltip.mjs:518:24)
    at Tooltip.alignBottom (primeng-tooltip.mjs:501:14)
    at Tooltip.align (primeng-tooltip.mjs:428:22)
    at primeng-tooltip.mjs:381:18
    at timer (zone.js:1707:37)
    at _ZoneDelegate.invokeTask (zone.js:400:33)
    at ZoneImpl.runTask (zone.js:158:47)
    at invokeTask (zone.js:481:34)
    at ZoneTask.invoke (zone.js:470:48)
    at data.args.<computed> (zone.js:1689:32)

@djohle
Copy link

djohle commented May 14, 2024

I am seeing this as well (pretty much same stack trace as above). Confirmed that moving slowly is okay, but a bit faster results in the error.

Also, possibly related, my page scrollbar appears for a split second during the showing of the tooltip (goes away as soon as the tooltip is done rendering). As a result, the page re-flows a bit each time which is very jarring if you move the mouse across a bunch of links in succession (e.g. items in a list/table). This happens regardless of movement speed, unfortunately.

No issues upon leaving -- tooltip just vanishes as expected.

@eliassen-davidmcfeely
Copy link

I am getting the same issues on the latest version. Fast moving over the tooltip gives the console error, but more annoying now I'm getting a vertical scrollbar on the body for half a second when I hover over an element that display's a tooltip. The vertical scrollbar then disappears.

@Sinan997
Copy link

Sinan997 commented May 20, 2024

Hi, i couldn't produce this bug in version 17.17.0. I guess it's fixed.

@djohle
Copy link

djohle commented May 20, 2024

Hi, i couldn't produce this bug in version 17.17.0. I guess it's fixed.

Tried 17.17.0 today and I can also confirm that it does not happen anymore.
Commit 6608cae appears to be the fix.

@WillBoig
Copy link

Confirmed on my part that 17.17.0 fixed the issue.

@horizoncarlo
Copy link
Author

Also confirmed to be fixed in 17.17.0. Still don't love the magic number of a 100ms timeout under the hood.

Anyway I'll close the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

7 participants