bug(cdkTable & mat-table): virtual scrolling shifting issues introduced in 21.1
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### Is this a regression?
- [x] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
21.0.0
### Description
In version v20.0.0 we had used a custom virtual scrolling strategy to allow tables with sticky headers. Upgrade to 21.0.0 broke the custom scrolling strategy implementation we have used so we decided to look for alternatives. Luckily, It seems that 21.0 also introduced support for tables with sticky header (or was introduced earlier, I am actually not sure which version added support), unfortunately, version 21.1 seems to introduce a bug which makes the scrolling shift around.
The bug can be seen in the example provided in the Table documentation as well. The documentation is still running on 21.0.0 but if you upgrade the example to 21.1.1, you can start seeing the buggy behavior when scrolling.
Scrolling seems to be fixed when `itemSize` is set to 0, however, in infinite scrolling implementations using DataSource that rely on `collectionViewer.onViewChange` `range.end`, it will continuously fetch the next page since `range.end` will always be the max value (3rd stackblitz link in the reproduction links has an async implementation mocked example that can be tested if uncommented in `table-virtual-scroll-example.component.ts` in constructor)
Example provided is on mat-table but cdkTable's behavior is the same if not worse
### Reproduction
StackBlitz link:
v21.0 (original example on version 21.0): https://stackblitz.com/edit/dfp4dgn5?file=src%2Fexample%2Ftable-virtual-scroll-example.ts&startScript=start
v21.1.1 (original example but on version 21.1.1): https://stackblitz.com/edit/6wi4nsxd?file=src%2Fexample%2Ftable-virtual-scroll-example.ts&startScript=start
v21.1.1 with DataSource: https://stackblitz.com/edit/gt9emjwr?file=src%2Fexample%2Ftable-virtual-scroll-example.ts (much more noticeable in this example)
Steps to reproduce:
1. Scroll around using the scroll wheel (also happens when you drag around the scrollbar thumb especially visible in tables with small amount of rows)
2. 3rd link has an infinite scrolling implementation that can be tested if uncommented in `table-virtual-scroll-example.component.ts`'s constructor
### Expected Behavior
The table should scroll correctly without shifting around
### Actual Behavior
Scrolling shifts around, some cases making it impossible to even scroll back up once you go all the way down and some cases scrolls upwards when scrolling down
### Environment
- Angular: 21.1.1
- CDK/Material: 21.1.1
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows & macOS
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia confrontando gli esempi di tabelle StackBlitz di v21.0 e v21.1.1, in particolare il comportamento di virtual-scroll e l'esempio DataSource. Nella terza riproduzione, decommenta l'implementazione asincrona in table-virtual-scroll-example.component.ts e osserva collectionViewer.onViewChange range.end durante lo scorrimento. Il lavoro è completato quando mat-table e cdkTable scorrono senza spostarsi e lo scorrimento infinito non recupera ripetutamente le pagine.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 48/100