Skip to content

mat-expansion-panel re-renders multiple times in a very simple case (no animation, OnPush). #14952

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.

Sign up for GitHub

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

Jump to bottom
Closed
mfursov opened this issue Jan 25, 2019 · 3 comments · Fixed by #30119
Closed

mat-expansion-panel re-renders multiple times in a very simple case (no animation, OnPush). #14952

mfursov opened this issue Jan 25, 2019 · 3 comments · Fixed by #30119
Assignees
@crisbeto
Labels
area: material/expansion P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent perf This issue is related to performance

Comments

@mfursov
Copy link

mfursov commented Jan 25, 2019

What is the expected behavior?

mat-expansion-panel updates (renders) exactly once when there is no reason to do it multiple times.

What is the current behavior?

mat-expansion-panel renders at least 2 times ([@.disabled]="true"+ ChangeDetectionStrategy.OnPush)
or even more times if animation is enabled (default) and change detection mode is Default.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-rj4nhe?file=app%2Fexpansion-overview-example.ts

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

7.2.1, Chrome 71

Is there anything else we should know?

It is very important not to have "unexpected" behavior (multiple rendering) because it affects performance metrics. If multiple rendering is "expected" I would suggest to mention about it in docs.
@josephperrott josephperrott added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent perf This issue is related to performance labels Feb 19, 2019
@josephperrott
Copy link
Member

It looks like the expansion panel does not rerender entirely multiple times, though change detection seems to be run multiple times unnecessarily.

@josephperrott josephperrott removed their assignment Feb 19, 2019
@josephperrott josephperrott mentioned this issue Feb 19, 2019
Closed
@snibbo
Copy link

snibbo commented Jan 15, 2024

Is there any workaround? My panel is jumping up and down :(

@crisbeto crisbeto self-assigned this Dec 5, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module
bcfd6c3 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes angular#27946.
Fixes angular#22715.
Fixes angular#21434.
Fixes angular#20610.
Fixes angular#20517.
Fixes angular#17177.
Fixes angular#16534.
Fixes angular#16503.
Fixes angular#14952.
Fixes angular#14759.
Fixes angular#14075.
Fixes angular#11765.
@crisbeto crisbeto mentioned this issue Dec 5, 2024
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module
b35c757 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes angular#27946.
Fixes angular#22715.
Fixes angular#21434.
Fixes angular#20517.
Fixes angular#17177.
Fixes angular#16534.
Fixes angular#16503.
Fixes angular#14952.
Fixes angular#14759.
Fixes angular#14075.
Fixes angular#11765.
crisbeto added a commit that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module (#30119)
7b64c45 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes #27946.
Fixes #22715.
Fixes #21434.
Fixes #20517.
Fixes #17177.
Fixes #16534.
Fixes #16503.
Fixes #14952.
Fixes #14759.
Fixes #14075.
Fixes #11765.

(cherry picked from commit aafa151)
@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 Jan 5, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/expansion P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent perf This issue is related to performance
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/expansion): switch away from animations module crisbeto/material2
5 participants
@mfursov @crisbeto @josephperrott @andrewseguin @snibbo