bug(mat-selection-list): mat-list-option deselecting itself when recreated in virtual-scroll-viewport
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
_No response_
### Description
I have a wrapper component for the `mat-selection-list` to support generic filtering. Also I have a master checkbox to select everything in the current filter scope. To support large datasets I also have an option for `virtual scrolling`.
Since I allow filtering, the source set of the list is constantly changing which clears the selection if an option is filtered out. To prevent this, I use the angular `SelectionModel` and the callbacks of the mat-list-options. But here is the problem:
Since the options are destroyed and recreated while scrolling through the viewport, the `selectedChange` event of the option is triggered with the initial unselected state of an option, so an option deselects itself when being recreated. But since this does not happen all the time, it seems there is a race between `(selectedChange)` and `[selected]`.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-iidbcx
Steps to reproduce:
1. Trigger the master check-box
2. scroll
3. see the master changes to indeterminate since check-boxes deselect themself
### Expected Behavior
I would expect that the inital `selected = false` when creating the component is not emitted as an event
### Actual Behavior
Inital `selected = false` when creating the component is emitted as an event and selected itself. But not always --> race
### Environment
Angular CLI: 18.0.7
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64
Angular: 18.0.6
... animations, cdk, cdk-experimental, common, compiler
... compiler-cli, core, forms, material, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.7
@angular-devkit/build-angular 18.0.7
@angular-devkit/core 18.0.7
@angular-devkit/schematics 18.0.7
@angular/cli 18.0.7
@schematics/angular 18.0.7
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.7
コントリビューションガイド
調査の方向性
StackBlitz の再現から始め、すべての項目を選択した後にスクロールしたときの mat-selection-list、mat-list-option、virtual-scroll-viewport 間の相互作用を調査してください。オプションを再作成しても false を伴う初期の selectedChange イベントが発生しないこと、またフィルタリングとスクロールの後もマスター選択が安定していることを確認してください。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100