bug(MatTable MatSort MatPaginator): Wrong display of sticky columns after sorting

[wojciechtryba-td]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Example project: https://stackblitz.com/edit/angular-ivy-fojmnq?file=src/app/app.component.ts

A MatTable with sticky columns, MatSort and MatPaginator are created. After scrolling the table horizontally and clicking on sort header, some cells of sticky columns are rendered with offsets. After moving a cursor or tapping (on touch devices) the view is refreshed and looks as expected.

This issue appears only when not all of data present in MatTableSource.data is displayed. When page size of paginator is set that is show all the data, everything works fine.

Reproduction

Steps to reproduce in example project:

1. Move horizontal scroll
2. Click on any sort header 2 times - try not to move cursor much
3. Sticky columns cells should display with offset or not display at all
4. After moving cursor, view is back to normal

Expected Behavior

Sticky columns shouldn't change position after sorting data

Actual Behavior

Sticky columns change position

Environment

• Angular: 13.2.2
• CDK/Material: 13.2.2
• Browser(s): Chrome (v101.0.4951.64), Firefox(v100.0.2), Safari (v15.1)
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[teodorachiosa]

I also noticed this issue in version 13.3.7 when filtering a table with sticky columns.

This behavior used to work in a previous version of CDK: 13.1.1 and this issue seems to have been introduced in 13.1.2 this commit.

[Arigatouz]

if you want a workaround for now I guess you can do something like this at the end of the request i know it's not the prettiest thing in the world but it works until they fix it coz i notice when i click on the document the sticky is working back

      setTimeout(() => {
        document.body.click();
      }, 0);

It's something regarding angular change detection I guess but it seems I can't figure it out if some one can explain it please let me know