Open Sam-Davis opened 3 years ago
This issue doesn't have enough information for the team to investigate. Can you include a StackBlitz reproduction?
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.
This seems identical to https://github.com/angular/components/issues/20517. I looked into it a while ago and there were two problems:
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.
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.
Facing same issue, any updates here or work around? I am using angular 14.
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