Components: Sorting a mat-table with expandable rows causes rows to not expand on first click

[ZachJW34]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Sorting the mat-table should not affect the expansion of the rows. The behavior should act as in the example table:
https://stackblitz.com/angular/keapqmllkjp?file=app%2Ftable-expandable-rows-example.ts

What is the current behavior?

After clicking on a column with sort capabilities and sorting the table, the expandable rows do not open on first click. Clicking a second time will expand the row.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-c8kwxe?file=app%2Ftable-expandable-rows-example.ts
1.) Click on a column-header to sort the table
2.) Click the rows to expand
3.) Once you've clicked on a row and it does not expand, clicking on it again will result in nothing. To get it to expand, you have to click another row and then re-click the row again.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

Oddly, if you cycle through all of the sorted states and get the rows to expand through each state, the rows will then behave normally after doing another sort.

[Mimis40]

It's not a perfect solution, but what I did to fix this issue is remove the animations for the expandable rows, and change the expand detail to use ngIf instead like so:

<ng-container matColumnDef="expandedDetail"> <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length"> <div *ngIf="element === expandedCorrelation" class="element-detail"> <div class="element-description"> {{element.description}} </div> </div> </td> </ng-container>

[vad101010]

Thanks for your solution, it worked and I've improved your solution, so now expansion and collapse are much smoother. I replaced this in the .ts component:

trigger('detailExpand', [ state('collapsed, void', style({ height: '0px' })), state('expanded', style({ height: '*' })), transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ])

[stnor]

I cannot get the animation to trigger reliably after changing sorting regardless of the workarounds mentioned in this thread. I'm using flex layout (ie not using html-table elements), not sure if that matters.

I switched to css animations and [ngClass], which solved the problem for me.

See https://stackoverflow.com/questions/52278357/matsort-breaks-mattable-detail-row-animations