bug(cdkTable & mat-table): virtual scrolling shifting issues introduced in 21.1

Ouverte
  • Quelque chose ne va pas ?
#32,715 48 commentaires 27 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
48/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Calme
Stack technique
angular, typescript
Domaine
frontend

Piste de recherche

Commencez par comparer les exemples de tableaux StackBlitz de v21.0 et v21.1.1, en particulier le comportement de virtual-scroll et l’exemple DataSource. Dans la troisième reproduction, décommentez l’implémentation asynchrone dans table-virtual-scroll-example.component.ts et observez collectionViewer.onViewChange range.end pendant le défilement. C’est terminé lorsque mat-table et cdkTable défilent sans décalage et que le défilement infini ne récupère pas les pages à plusieurs reprises.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

area: cdk/scrolling area: cdk/table P2
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

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
Langage dominant
TypeScript
Étoiles
25k
Forks
6.9k
Merge moyen
2 j 7 h
PR mergées (30 j)
83

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/components

Toutes les issues de angular/components

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.