angular / angular/components

bug(mat-selection-list): mat-list-option deselecting itself when recreated in virtual-scroll-viewport

未关闭
#29,426 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: material/list P4
主要语言
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。