bug(Table): Table with Expandable Rows + MatSort + NgIf causes unclosable phantom row to display

[andrew-schlackman]

Reproduction

https://stackblitz.com/edit/angular-cw9q35?file=src/app/table-expandable-rows-example.html

Steps to reproduce:

1. Expand any row
2. While the row is still expanded, use one of the sort headers to sort the table 3 times so that the row goes back to it's original position
3. Try to close the expanded row
4. A second copy of the expanded row will be added instead of closing the first one. The original row is now a phantom and cannot be removed, even if the row is closed and another row is expanded.

Expected Behavior

Expanded row would be closed when clicking the row, even after sorting.

Actual Behavior

If you sort the table 3 times while a row is expanded, that row can never be closed and a duplicate of that row is added if you try to expand it again.

Environment

• Angular: 12
• CDK/Material: 12

Misc

Adapted from Table with expandable rows example from https://material.angular.io/components/table/examples

Changes include:

• adding an *ngIf to the outer expandedDetail div
• changing the animations to be on :enter and :leave to work with the ngIf
• adding matSort to the table.

Everything works as expected if the ngIf is removed and only animations are used for the effect, but I wanted the elements to be completely removed from the DOM when they are not expanded.

[crisbeto]

I suspect that this is an issue in @angular/animations that we can't do much about in this repo. See https://github.com/angular/angular/issues/18847.