bug(select): trigger value changes due virtual scroll DOM updates

[GeorgeHulpoi]

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

When the user selects an option from the virtual scroll, scrolling the selected options outside the visible range will remove them from the SelectionModel.

This happens because of:

components/src/material/select/select.ts

Lines 662 to 665 in ee5b13f

	this.options.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {
	this._resetOptions();
	this._initializeSelection();
	});

That will reset _selectionModel each time the virtual scroll updates the DOM.

Reproduction

1. https://stackblitz.com/edit/angular-material-select-with-virtual-scroll?file=src%2Fnot-working.component.ts
2. In Not working form field, select a few items and then scroll down.
3. You will see the Select trigger value removing the selected option.

Expected Behavior

The select trigger value should render the selected options even if they are removed from the DOM.
VIDEO: https://cdn.george-hulpoi.dev/videos/material-select-virtual-scroll-working.mp4

Actual Behavior

https://cdn.george-hulpoi.dev/videos/material-select-virtual-scroll-not-working.mp4

Environment

Angular CLI: 19.0.7
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 19.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package Version

@angular-devkit/architect 0.1900.7
@angular-devkit/core 19.0.7
@angular-devkit/schematics 19.0.7
@angular/build 19.0.7
@angular/cdk 19.1.5
@angular/cli 19.0.7
@angular/material 19.1.5
@schematics/angular 19.0.7
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

[GeorgeHulpoi]

For those who want a quick solution, I wrote an article about it: https://en.george-hulpoi.dev/blog/how-to-make-angular-material-select-work-with-virtual-scroll

[crisbeto]

The select doesn't properly support virtual scrolling yet. It's tracked in #10122.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}