Expansion Panel - Header height animation jump when inside navigation tabs

[rbogdy]

What is the expected behavior?

The height to be rendered directly with the set values and not 'jump' to the new value from the 'default hard coded' ones

What is the current behavior?

The mat-expansion-panel-header height will jump to the newly set value (even when using the new MAT_EXPANSION_PANEL_DEFAULT_OPTIONS injection token) resulting in ugly visuals. This is very evident when switching between tabs for example

What are the steps to reproduce?

https://stackblitz.com/edit/angular-e2of2s

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

Angular: 7.2.0
Material: 7.2.1
Browser: Chrome or Mozilla@latests

Is there anything else we should know?

In the StackBlitz example if you change the 'collapsedHeight' and 'expandedHeight' to the default value of '48px' they will not 'jump' anymore

[rbogdy]

any news regarding this problem?

[cmdickson]

I was having this same problem and found that disabling animation for the panel header addressed the issue. I just made the change in your Stackblitz example and it seemed to work there as well:

<mat-expansion-panel-header [@.disabled]="true" expandedHeight="60px" collapsedHeight="60px">
        This is the expansion 3 title
</mat-expansion-panel-header>

So, as long as the desired behaviour is static header height, this workaround should work

[simeyla]

@cmdickson Phew! This was driving me nuts. Thanks for pointing out that you can do this just on the header - so as to retain expand and contract animations for the panels' contents.

[ghinton]

Anyone noticed that if you set [@.disabled]="true" when the expansion panel is within a tab, if you navigate to another tab and then back to the one with the expansion panel in, the animations are re-enabled? Driving me nuts!

[ghinton]

Looking at the markup, it appears that the ng-animate-disabled class is removed when you switch tabs

[lubos-bistak]

Any news or progress on this issue?