bug(COMPONENT): MatExpansionPanel close when switching tabs(MatTabs)

[derianmarchan]

Bug report

The expansion panel closes automatically when you switch tabs and return, with the panel with the class ".mat-opened"

Packages

• @angular/material/tabs
• @angular/material/expansion

Environment

• Angular: 11.0.0
• CDK/Material: 11.0.0
• Browser(s): Chrome / Edge

[crisbeto]

Can you post an example of it breaking? It's working for me here: https://stackblitz.com/edit/angular-oaf1rd?file=src/app/tab-group-basic-example.html

[derianmarchan]

I was checking the code and the problem is when declaring an animation within the component..

I modified your code for the example: https://stackblitz.com/edit/angular-oaf1rd-8jzvxb?file=src%2Fapp%2Ftab-group-basic-example.html

[crisbeto]

I think that problem is due to the fact that @angular/animations blocks any child animations from running while a parent is animating. Since we use an animation to set the expansion panel's height, your custom animation will block it. Usually you can get this to work with animateChild, but I wasn't able to, presumably because the animations are defined in different modules. We've had similar issues in the past so it might be time to look into a workaround on our end.