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

[DerMagereStudent]

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

[DerMagereStudent]

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:

components/src/material/list/list-option.ts

Lines 157 to 163 in f411903

	set value(newValue: any) {
	if (this.selected && newValue !== this.value && this._inputsInitialized) {
	this.selected = false;
	}
	this._value = newValue;
	}

Disabling the feature by setting templateCacheSize fixed it:

*cdkVirtualFor="let item of this.dataSource.filteredData; templateCacheSize: 0"

[princehorn]

Moin @DerMagereStudent,

you could use a property like selected in your model of list items and set that according to the selected state of the item to true/false. Doing that the selection state is persisted.

<mat-list-option
            *cdkVirtualFor="let item of items; trackBy: trackByFunction"
            [disabled]="item.isDisabled"
            [selected]="item.isSelected"
            [value]="item"
>...</mat-list-option>

✌