mat select multi with virtual scroll loses context of selection

[LouisF410]

What is the expected behavior?

cdk-virtual-scroll-viewport inside mat select with multiple should persist selected values.

What is the current behavior?

When selecting and scrolling, when items are out of render buffer the list loses it selected context.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-gvgfxs
Select Description 120 - 123 and scroll away, when returning to items they are deselected.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "7.2.11"
"@angular/cdk": "^7.3.6"
"@angular/common": "7.2.11"
"@angular/compiler": "7.2.11"
"@angular/compiler-cli": "7.2.11"
"@angular/core": "7.2.11"
"@angular/forms": "7.2.11"
"@angular/http": "7.2.11"
"@angular/material": "^7.3.6"
"@angular/platform-browser": "7.2.11"
"@angular/platform-browser-dynamic": "7.2.11"
"@angular/platform-server": "7.2.11"
"@angular/router": "7.2.11"
"typescript": "3.2.4"
"zone.js": "^0.8.29"

OS: Linux_x64
Browser: Chrome

[LouisF410]

Also, want to add if you select an item and close the overlay. When reopening the list is blank

[aalbericio]

I have a workaround for this but it should be definetely addressed asap.

Best.

HI @aalbericio .. Can you please tell me the fix..i am stuck in this issue

[kburns1]

I have a workaround for this but it should be definetely addressed asap.

Best.

Same here. I am stuck on this. Any insight into the work around?

[kkrivera]

This workaround worked for me. https://stackoverflow.com/questions/54137691/multi-select-with-cdk-virtual-for-making-it-look-like-nothing-was-selected

Basically, you are creating a "static" list of selected mat options which are hidden, but still apply their "selection" to the mat-select, and therefore the bound form control

[paco76]

I didn't test it with mat-select but had a similar issue with mat-list-option
In order to perform even better cdk-virtual-scroll-viewport by default cache the content to some degree.
You can reset it by adding templateCacheSize: 0 just like in the following example.

<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let item of items; templateCacheSize: 0">{{item}}</div>
</cdk-virtual-scroll-viewport>

[PierreDuc]

I've created another work around here: https://stackoverflow.com/a/61291577/3106920

[leopangchan]

Hope it will be fixed soon. Virtual scrolling is very useful when the number of options is huge.

[zhonglin94]

Virtual scroll render the element dynamically, so lost the selection state is reasonable. But it's a great regret that I cannot be used with mat-selection-list because this issue.

[crisbeto]

Should be covered by #10122.