Components: Sticky columns are not correctly positionned when there are 2 sticky columns on the left

[ghusse]

Reproduction

Reproduced on stackblitz

Steps to reproduce:

1. Define a mat-table with 2 sticky columns on the left
2. Use the horizontal scrollbar
3. Position of the second column is not correctly computed

Expected Behavior

What behavior were you expecting to see?

Two sticky columns, correctly positioned and not moving when using the horizontal scrollbar.

Actual Behavior

What behavior did you actually see?

1. Sometimes, the second sticky column is actually moving when using the horizontal scrollbar (see the 3rd example on my stackblitz)
2. Sometimes the second sticky column is sticky, but not correctly positioned (see the 2nd example on my stackblitz: this column is too far on the right).

Environment

• Angular: 7, 8
• CDK/Material: 7, 8
• Browser(s): Firefox 71.0, Chromium 75.0.3770.142
• Operating System: Windows 10, Ubuntu 18.04

[ghusse]

Looking at the code, it seems that cells' width is computed before actually being rendered. It causes an issue when setting the left css property

[dickp]

I'm having a similar problem. In my case, I'm supplying a variable set of columns which can be updated dynamically.

Stackblitz example here: https://stackblitz.com/edit/components-issue-dkllsa

If you click the "Toggle Pos Column" button, it will take the first column out of the column set, or put it back. The first time (removing the column), everything is fine. However, clicking it again to put it back leaves the second column pushed too far to the right.

The "Toggle Pos Column (delayed)" button leaves a short timeout between updating the column set and setting the stickiness of the columns. This option works perfectly.

Looking in the code, and adding some logpoints to src/cdk/table/sticky-styler.ts:updateStickyColumns() shows that when clicking the non-delayed button the new column seems to be pushed onto the tail end of the cellWidths (and consequently startPositions) arrays. Obviously the sticky position is then calculated incorrectly. The delayed sticky update happens after the columns have rendered, so works fine.

[andrewseguin]

@ghusse That does look like the issue - thanks

[daviddomingoslalom]

Any more insight into this issue? @dickp solution used to work for Material 8, but in Material 10 I am getting the same issue again.