Skip to content

[Tooltip]: ChangeDetection is triggered to often #15990

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

Closed
dmkorol opened this issue May 9, 2019 · 6 comments
Closed

[Tooltip]: ChangeDetection is triggered to often #15990

dmkorol opened this issue May 9, 2019 · 6 comments
Labels
area: material/tooltip perf This issue is related to performance

Comments

@dmkorol
Copy link

dmkorol commented May 9, 2019

What is the expected behavior?

Change detection runs once when component is shown or become hidden

What is the current behavior?

When move mouse over button ChangeDetection is run a lot of times in short period of time

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://stackblitz.com/edit/angular-2g1mvi

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "7.3.7",

@jelbourn jelbourn added the needs: clarification The issue does not contain enough information for the team to determine if it is a real bug label May 12, 2019
@jelbourn
Copy link
Member

@dmkorol can you provide more information? How many times are you seeing change detection run? On which application were you measuring? How were you measuring?

@dmkorol
Copy link
Author

dmkorol commented May 13, 2019

can you provide more information?
How many times are you seeing change detection run?

There is online reproduction: https://stackblitz.com/edit/angular-2g1mvi
Please open the console to see results during moving on the button(it reproduce on all browsers)
For example, I got 19 executions of val(), when I moved the cursor on the button.

How were you measuring?
On which application were you measuring?

I add a function on the view {{val()}} that write to console each time when it is run (when change detection is triggered on the view)

Desired behavior the tooltip should run change detection only once onShow or onHide.

@noririco
Copy link

noririco commented May 20, 2019

can you provide more information?
How many times are you seeing change detection run?

There is online reproduction: https://stackblitz.com/edit/angular-2g1mvi
Please open the console to see results during moving on the button(it reproduce on all browsers)
For example, I got 19 executions of val(), when I moved the cursor on the button.

How were you measuring?
On which application were you measuring?

I add a function on the view {{val()}} that write to console each time when it is run (when change detection is triggered on the view)

Desired behavior the tooltip should run change detection only once onShow or onHide.

look
matMouseMovePerformance
matNoMat

@jelbourn jelbourn added the perf This issue is related to performance label May 20, 2019
@yakimko
Copy link

yakimko commented May 12, 2020

I found out if remove the second param from ComponentPortal

this._portal = this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef);

the problem will disappear.

do we really need to set it?

@wagnermaciel wagnermaciel added needs triage This issue needs to be triaged by the team and removed needs: clarification The issue does not contain enough information for the team to determine if it is a real bug labels Aug 13, 2020
@crisbeto
Copy link
Member

A lot of this comes from the fact that we have Angular animation events for when an animation starts and when it finishes. There's an in-progress PR (#19432) that decouples the tooltip from the Angular's change detection cycle and should resolve this issue.

@crisbeto crisbeto removed the needs triage This issue needs to be triaged by the team label Aug 16, 2020
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: material/tooltip perf This issue is related to performance
Projects
None yet
Development

No branches or pull requests

7 participants