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: registering show/hide events twice on each target #3701

Closed
melloware opened this issue Nov 24, 2022 · 1 comment · Fixed by #3702
Closed

Tooltip: registering show/hide events twice on each target #3701

melloware opened this issue Nov 24, 2022 · 1 comment · Fixed by #3702
Assignees
Labels
React 18/19 Issue or pull request is *only* related to React 18/19 Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@melloware
Copy link
Member

melloware commented Nov 24, 2022

Describe the bug

Tooltip is registering 2 show and 2 hide events on every tooltip target.

By switching from Mount Effect + Update Effect to just a single React.useEffect reduces the amount of registered listeners. Show and Hide events were being registered twice on all components and this is due to the fact the functions being added are anonymous.

See MDN: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Note: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an addEventListener call, the second function will also be added to the list of event listeners for that target.

Indeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.

Repeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)

If you go to the current showcase and Inspect the button with a tooltip registered you will see this...

image

Reproducer

https://primefaces.org/primereact/tooltip/

PrimeReact version

8.7.2

React version

17.x

Language

ALL

Build / Runtime

Next.js

Browser(s)

ALL

Steps to reproduce the behavior

  1. Right click on Template button and inspect the DOM events
  2. Notice mouseenter and mouseleave are registered twice

Expected behavior

Only 1 show and hide event registered

@melloware melloware added the Type: Bug Issue contains a defect related to a specific component. label Nov 24, 2022
@melloware melloware added this to the 8.7.3 milestone Nov 24, 2022
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 24, 2022
@melloware melloware removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 24, 2022
melloware added a commit to melloware/primereact that referenced this issue Nov 24, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@mertsincan mertsincan modified the milestones: 8.7.3, 8.7.4 Dec 5, 2022
melloware added a commit that referenced this issue Jan 7, 2023
@melloware melloware reopened this Jan 8, 2023
@melloware melloware modified the milestones: 8.7.4, 9.0.0 Jan 8, 2023
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 8, 2023
@melloware melloware removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 9, 2023
melloware added a commit to melloware/primereact that referenced this issue Apr 27, 2023
@melloware melloware modified the milestones: 10.0.0, 9.4.0 May 10, 2023
@melloware
Copy link
Member Author

melloware commented May 10, 2023

This is fixed when I fixed: https://github.com/primefaces/primereact/pull/4364/files#diff-c2ff596ea86904612fb6c1def69d13221fa5916ade03a45d9740e2d38bdc72a3

it was a React 18 Strict mode double mounting issue.

@melloware melloware added the React 18/19 Issue or pull request is *only* related to React 18/19 label May 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
React 18/19 Issue or pull request is *only* related to React 18/19 Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
2 participants