angular / angular/components

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

Open
#13,431 11 comments 6 reactions 0 assignees View on GitHub
area: material/table P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue using the linked StackBlitz examples, starting with app/table-expandable-rows-example.ts and the mat-table sorting and expandable-row interactions. Compare behavior before and after sorting; done means rows expand on the first click after any sort state, matching the expected example.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.