bug(cdkTable & mat-table): virtual scrolling shifting issues introduced in 21.1
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- angular, typescript
- 領域
- frontend
調査の方向性
まず、v21.0 と v21.1.1 の StackBlitz のテーブル例を比較します。特に virtual-scroll の動作と DataSource の例を確認してください。3 つ目の再現手順では、table-virtual-scroll-example.component.ts の非同期実装のコメントを解除し、スクロール中の collectionViewer.onViewChange range.end を観察します。mat-table と cdkTable がずれることなくスクロールし、無限スクロールでページが繰り返し取得されなければ完了です。
索引モデルが issue の本文から書いたものです。
説明
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:
- Scroll around using the scroll wheel (also happens when you drag around the scrollbar thumb especially visible in tables with small amount of rows)
- 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
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.9k
- 平均マージ
- 2日 7時間
- マージ済み PR（30日）
- 83
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/components のほかの issue
-
bug(mat-slider): on Firefox, slider thumb is not aligned with cursor対応中かも @Devyalamaddi が 4 日前に担当しました。 オープンarea: material/slider P4
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
angular/components#34094 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug(material/sort): hover hint arrow on an unsorted header shows the active sort direction, not the resulting direction after click.対応中かも @abdul-karim-mia が 2 日前に担当しました。 オープンarea: material/sort P3
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
angular/components#33933 ·
メンテナーはふだん 1 日以内に返信
-
bug(mat-date-picker): month shown twice in date picker対応中かも @PreethiPantangi が 54 日前に担当しました。 オープンarea: material/datepicker P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33763 · コメント 2 件 · リアクション 3 件 ·
メンテナーはふだん 1 日以内に返信
-
Bug in table.scss footer cell height: unset instead of footer row height unset対応中かも @minwookshin が 41 日前に担当しました。 オープンarea: material/table P4
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
angular/components#33709 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug(date-adapter): Misleading JSDoc for createDate returns type対応中かも @BHUVANSH855 が 171 日前に担当しました。 オープンarea: material/core P3
難易度 1/5 1時間未満 初心者へのやさしさ 78/100
angular/components#33059 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
angular/components の issue をすべて見る
似ている issue
-
bug parity
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
WenyuChiou/agent-board#1489 ·
メンテナーはふだん 1 日以内に返信
-
area: bazaar bug complexity: medium
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
accensa/x402-facilitator-stellar#779 ·
メンテナーはふだん 1 日以内に返信
-
bug good first issue P4 size:S web-ui
難易度 2/5 半日 初心者へのやさしさ 85/100
josephfung/curia#2600 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
cloudflare/partykit#444 ·