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

[Sam-Davis]

trafficstars

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 https://github.com/angular/components/issues/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 https://github.com/angular/components/issues/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 https://github.com/angular/components/issues/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...

[crisbeto]

This should no longer be an issue, because we've moved Material away from the @angular/animations module in 19.2.0.

[angular-automatic-lock-bot[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.}