bug(mat-sort): sort arrow changes, but data is not sorted in the table

[woteska]

Is this a regression?

I do not know.

The previous version in which this bug was not present was

I do not know.

Description

Data is not sorted in children's table when triggering the children's sorts to work in sync with the parent table's sort.

Reproduction

Steps to reproduce:

1. Open https://stackblitz.com/edit/angular-yzr1r9-jtjxz6?file=src/app/table-sorting-example.ts
2. Click on the first 'Name' column on the top 2 times (sort should be active: 'name', direction: 'desc')
3. Verify that the parent table's rows are sorted correctly (in desc alphabetical order)
4. And also see that the children's table sort arrow points to the good direction
5. Also also see that the data is not sorted in the children's table (despite point 4.)
6. Verify that the children's data sorted only if the children's table header is clicked directly

Note: children's headers are not visible in the real use-case, it is visible now only for the demo.

Expected Behavior

Data should be sorted in all tables.

Actual Behavior

Data is not triggered to be sorted.

Environment

• Angular: 14
• CDK/Material: 14
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

See demo.

[rpisarew]

It's stopped working for me too, but with Angular Material v13.3.9 If I click on a column it calls my handler, but every time with the direction 'asc' and it does not cycle through the directions on further clicks.

[rpisarew]

I stepped with the debugger through the sort code, it looks like the current active sort column is not stored and because of that it is setting the direction to 'asc' every time (see here).

  sort(sortable: MatSortable): void {
    if (this.active != sortable.id) {
      this.active = sortable.id; // <-- this.active is still undefined on the next call
      this.direction = sortable.start ? sortable.start : this.start;
    } else {
      this.direction = this.getNextSortDirection(sortable);
    }

    this.sortChange.emit({active: this.active, direction: this.direction});
  }

[woteska]

I stepped with the debugger through the sort code, it looks like the current active sort column is not stored and because of that it is setting the direction to 'asc' every time (see here).

  sort(sortable: MatSortable): void {
    if (this.active != sortable.id) {
      this.active = sortable.id; // <-- this.active is still undefined on the next call
      this.direction = sortable.start ? sortable.start : this.start;
    } else {
      this.direction = this.getNextSortDirection(sortable);
    }

    this.sortChange.emit({active: this.active, direction: this.direction});
  }

Nice! Do you have a workaround idea?
I have also tried to programatically set the sort by setting the dataSource.sort.sort(getSortable()), but it worked really strange.

[rpisarew]

I'm still searching for a solution (I have this one only with one table), but your Stackblitz is working for me properly.

[rpisarew]

I found my issue. The problem for me was that the component was unmounted to show a loader and that was resetting the internal state.

[amysorto]

The sorting on the Stackblitz is also working for me. Thanks @rpisarew for helping debug!

[woteska]

The sorting on the Stackblitz is also working for me. Thanks @rpisarew for helping debug!

Please reopen it, because it is not working and does not connects to @rpisarew's issue.

The toppest No. sort header clicked only. You can see that the child table No. data is not sorted!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}