bug(mat-selection-list): mat-list-option deselecting itself when recreated in virtual-scroll-viewport
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 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