Expandable table in tabs component, navigate away and navigate back from tab, causes all table rows to show expanded content

[Sam-Davis]

If you put a table with expandable rows in a tab, then navigate away and navigate back, the table appears with all the rows expanded. On first opening of tab, there is no issue, so I'm guessing this is an issue happens when you navigate away, the table gets expanded (you have to then double click each row to hide expanded content).

Versions
10.0.6 @angular/cli
10.1.3 @angular/material

[jelbourn]

This issue doesn't have enough information for the team to investigate. Can you include a StackBlitz reproduction?

[Sam-Davis]

Good idea. Stackblitz is here:
Stackblitz example

To create this Sackblitz, I took the example on the materials website - Table with expandable rows,. I copy pasted the table html and put each table in a different tab. If you go to tab 2 and back to tab 1, the bug is clearly visible.

[crisbeto]

This seems identical to #20517. I looked into it a while ago and there were two problems:

1. The tabs block child animations while they're animating.
2. The expansion panel has a void animation which will cause it to snap into a different state when it gets detached while it's expanded.

When I tried fixing it for #20517, removing the void state ended up breaking in a different way and allowing child animations on the menu didn't make much of a difference. The setup is slightly different in mat-tab-group, compared to mat-menu, so I'm not 100% sure that it's a duplicate of #20517.

[Sam-Davis]

Interesting. The trigger on load has the transition:

fromState: "void",
phaseName: "start"
toState: "collapsed"

The transition on switching tabs has the transition:

fromState: "collapsed"
phaseName: "start"
toState: "void"

A working transition has the transition event:

fromState: "collapsed"
phaseName: "start"
toState: "expanded"

or when collapsing:

fromState: "expanded"
phaseName: "start"
toState: "collapsed"

After the switching tabs transition has happened and it goes into state void, the transition events are no longer fired.

I've updated the stackblitz example to include a console log of the event each time it occurs. As you can see the transition event fires once for each row when the page loads of a tab is clicked.

[mgonzalez121690]

Facing same issue, any updates here or work around?
I am using angular 14.

[devAnky]

Seems to be also an issue with (vertical) stepper in Angular 18...