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.

[mikerentmeister]

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:

` <td mat-cell matCellDef="let element" [attr.colspan]="displayedColumns.length"> <div ngIf="element === expandedCorrelation" class="element-detail">

{{element.description}}

    </div>
</td>

`

[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

[MuqeedA]

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)')) ])

Thanks. worked perfectly.

[nickeeromo]

Confirmed that vad101010's answer worked for me as well, but wanted to comment on why I was having the issue.

Simply followed the example here, AFTER implementing a manual sort handler: https://material.angular.io/components/table/examples#table-expandable-rows, but the issue is that nothing at all was mentioned about the combination of sorting with expandable rows, or that we would have to solve for some "void" state in the exact same way as the "collapsed" state.

It is not clear in just those examples where the void state could even come from.

[pacocom]

Not working for me!! First element start

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)')) ])

    "@angular/animations": "^12.2.9",
    "@angular/cdk": "^12.2.9",
    "@angular/common": "^12.2.9",
    "@angular/compiler": "^12.2.9",
    "@angular/core": "^12.2.9",
    "@angular/forms": "^12.2.9",
    "@angular/material": "^12.2.9",
    "@angular/platform-browser": "^12.2.9",
    "@angular/platform-browser-dynamic": "^12.2.9",
    "@angular/router": "^12.2.9",

    "@angular-devkit/build-angular": "~12.2.9",
    "@angular/cli": "^12.2.9",
    "@angular/compiler-cli": "^12.2.9",
    "@angular/language-service": "^12.2.9",

[newaeonweb]

maybe this solution helps: https://github.com/angular/components/issues/12187#issuecomment-405398118

[rafaasimi]

Obrigado por sua solução, funcionou e melhorei sua solução, então agora a expansão e o colapso são muito mais suaves. Eu substituí isso no componente .ts:

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)')) ])

It worked great, I just changed the animations and had no more problems.

[mohitsharma93]

just use 100% in place of * height

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

[asgharb]

just use 100% in place of * height

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

Thankful. worked perfectly.

[KhizerRehan]

Sorting a mat-table with expandable rows causes row all rows to expand abruptly on initial first click when i was using sortingDataAccessor to provide in memory and custom sorting

e.g

 @ViewChild('matSort') set matSort(ms: MatSort) {
    if (!ms) {
      return;
    }
    this.dataSource.sortingDataAccessor = (item: any, property: string) => {
      switch (property) {
        case <Column_Name>:
          return item.<Column_Name>
        case property:
          return item[property];
        default:
          return null;
      }
    };
    this.dataSource.sort = ms;
  }

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

but after updating Animation Trigger to this ALL WORKED LIKE MAGIC 🪄

export const detailsExpand = 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)'))
]);

could someone explain what happend by adding. "void" state how did it worked.

cc: @vad101010