Open DerMagereStudent opened 2 months ago
After further investigation, I can say there is no such thing as the emitted initial selected = false
value I mentioned earlier. The problem is that the mat-list-option
is not compatible with the template caching feature of cdkVirtualFor
, since the component is reused and the value is updated. When this happens the selected
value is set to false
:
Disabling the feature by setting templateCacheSize
fixed it:
*cdkVirtualFor="let item of this.dataSource.filteredData; templateCacheSize: 0"
Is this a regression?
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 forvirtual 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:
Expected Behavior
I would expect that the inital
selected = false
when creating the component is not emitted as an eventActual Behavior
Inital
selected = false
when creating the component is emitted as an event and selected itself. But not always --> raceEnvironment
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