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

Đang mở
  • Có gì không ổn?
#32,715 48 bình luận 27 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
angular, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách so sánh các ví dụ bảng StackBlitz của v21.0 và v21.1.1, đặc biệt là hành vi của virtual-scroll và ví dụ DataSource. Trong lần tái hiện thứ ba, bỏ chú thích phần triển khai bất đồng bộ trong table-virtual-scroll-example.component.ts và quan sát collectionViewer.onViewChange range.end khi cuộn. Được xem là hoàn tất khi mat-table và cdkTable cuộn mà không bị dịch chuyển, đồng thời tính năng cuộn vô hạn không liên tục tải lại các trang.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.9k
Merge trung bình
2 ngày 7 giờ
Pull request đã merge (30 ngày)
83

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/components

Tất cả issue của angular/components

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.