Angular Material Table (mat-sort-header + expandable rows)

[Bradenb25]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When creating expandable rows ie (https://stackblitz.com/edit/angular-material-expandable-table-rows) they should only open when clicked. In addition when you add a mat-sort-header and click a header to sort they should not open up.

What is the current behavior?

I created an angular material table with expandable rows and added mat-sort-header to the columns. When I click on a column it sorts, but when it finishes sorting some of the rows are open. In the repro none of the rows are opened, however you can see the affect it is having in mine. Once you filter by the heading you have to click on a row multiple times to get it to open(similar to mine, but with mine it is actually open) I added a console.log so that you can see what the show value is.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-a8kjon

Is there anything else we should know?

I'm pretty sure it is a problem with the when predicate. It doesn't get run correctly when you sort on the header.

[pabloFuente]

Would be nice to solve this issue. Makes impossible to use expandable and sortable rows features together.

I have checked that expandable rows are opened one after the other (sometimes more than one at a time) always at the same order for the same data. Once you close them (clicking twice as @Bradenb25 stated) everything works just fine. You can then click on the sortable header cells: visible rows are sorted and expandable rows are not opened.

[chriskrolak]

A smaller reproduction example that I think shares the same root cause:
https://stackblitz.com/edit/angular-3nq54m?file=app%2Fsort-overview-example.html

After clicking on a desert name it should tilt to the right. After sorting the table, the tilting starts behaving unpredictably.

[pabloFuente]

Okey, fixed by changing my detailExpand animation. This is the one applied to the expandable rows:

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div class="element-detail" [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'" [style.height]="element.expanded ? 'unset' : '0 !important'">
      <p>My expandable content</p>
    </div>
  </td>
</ng-container>

By changing the animation from

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

to

trigger('detailExpand', [
  state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
  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)'))
])

Only changes are first state('collapsed' to state('collapsed, void' and the last transition(...) line

Now both sorting and expanding rows work as expected.

[pevans360]

Thank you Pablo for the fix!

I got the code from the StackBlitz at https://stackblitz.com/angular/mkgqybdjdmj?file=app%2Ftable-expandable-rows-example.ts and burned a few hours trying to work around it before finding this thread.

Does anybody know how to contact the author so it can be updated?