Expansion panel FOUC when contained in dialog

[SamuelMS]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Expansion panels currently render with a flash of unstyled content (FOUC) when nested in a dialog -- they always temporarily appear as expanded, regardless of what the "expanded" attribute is set to. After a moment, all expansion panels that have been explicitly set to closed collapse.

This only occurs in Angular / Material 7.

Expected behavior

Expansion panels should appear as collapsed when the dialog opens when expanded=false instead of briefly appearing as expanded, then collapsing after a delay.

Minimal reproduction of the problem with instructions

Click the button and note the flash of unstyled content in the dialog in Angular 7.

Angular 7 (bugged): https://angular-egzwfw.stackblitz.io
Angular 6 (correct): https://angular-eepzxs.stackblitz.io

What is the motivation / use case for changing the behavior?

Flashes of unstyled content are jarring and feel very buggy.

Environment

Angular version: 7.0.1
Material version: 7.0.2
TypeScript: 3.1.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[crisbeto]

Might potentially be solved by #11778.

[crisbeto]

I tried it out and it doesn't look like it'll be fixed by #11778.

[josephperrott]

Reopening as the fix was reverted.

This seems to be a larger issue across our library as our components use animations to set state quite frequently.

[crisbeto]

@josephperrott I've opened #14127 which should fix the issue and avoid the presubmit issues.

[SamuelMS]

@crisbeto @josephperrott Hate to be that guy, but has there been any traction on this issue since November? Looks like it might be blocked by a larger issue, per comments in the PR?

[ywager]

Also encountered this problem

[StavM]

Hope this issue gets the attention it deserves. definitely shouldn't be a "P4" priority.
this is probably one of the top reasons to stay with 6.4.7.

[BobBDE]

Hi guys,

It's a workaround but you can use the lazy rendering of the expansion panel to prevent the animation ( with ng-template matExpansionPanelContent).

[ThomasTheJohnson]

@crisbeto @josephperrott, Is there a timeline for this fix being worked into a release? Asking so we know whether to move forward with workarounds or reworks.

[FONFAAS]

hello! is there an ETA on this?

[JoshuaAlzate]

Still persist on Angular Material 10.0.1

[mindscratch]

Still persist with Angular Material 11.0.x

[Akxe]

The skackblitz links in the issue are not opening. Here is mine for Angular v11 https://stackblitz.com/edit/components-issue-1fvgvm

[waseemw]

I'm still having this issue as well with Angular Material 11

[adarsh-thakur]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

Thanks alot. You Saved the Day.

[liesahead]

I think the problem is inside dialog itself, because I noticed that all content is jumping when dialog is opening. To reproduce that you can open any dialog in angular material dialog example page. The content jumps a little. We have separated dialog header and footer (actions) and now content jumping became very noticeable. At first thought that there is a bug in our project, but then decided to check the material dialog example page.

Open this stackblitz:
https://stackblitz.com/angular/rogvlbmonba?file=src%2Fapp%2Fdialog-overview-example.ts

And now open dialog. You will notice how buttons are jumping a little. If you cannot - enable CPU throttling in devtools.

[Synzed]

Same thing happens with an expansion panel inside a mat-menu .. problem still persists

[VladislavKhlystun]

Still persist with Angular Material 12.0.x

[vgt-benjaminh]

Also happens when the expansion panel is placed inside a stepper using Angular Material 11.2.13

[pranav-js]

give this issue some attention please. this is serious glitch and I spent so much time thinking I was doing something wrong! but it seems to be there since 2018!

[steffenhees]

If this is not fixed yet, please fix it!!! Thank you!!!

Had the same problem. With the workaround from @dcrouch79 it works for now. Thanks!

[angular-automatic-lock-bot]

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