Components: [Tooltip]: ChangeDetection is triggered to often

Created on 10 May 2019  路  6Comments  路  Source: angular/components

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",

materiatooltip perf

Most helpful comment

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

All 6 comments

@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?

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.

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

I found out if remove the second param from ComponentPortal https://github.com/angular/components/blob/5284a57b2f24319359d0528522feeca9c1393751/src/material/tooltip/tooltip.ts#L336

the problem will disappear.

do we really need to set it?

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.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jelbourn picture jelbourn  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

vitaly-t picture vitaly-t  路  3Comments

vanor89 picture vanor89  路  3Comments

julianobrasil picture julianobrasil  路  3Comments