[BUG] Selected value doesn't get displayed when used along with CdkVirtualScrollViewport

[RitamChakraborty]

When displaying the options using cdk-virtual-scroll-viewport, the selected value doesn't get displayed on the dropdown if it's searched. It works fine if we we select the value manually by scrolling to the option. But if we select the value and the index of the result is beyond 20 it's not showing up in the dropdown. It's working with search if the index is less than 20.

Although the value is getting selected correctly just on the UI it's not updating. If we open the dropdown and selecting the value again, it's working.

• GitHub Repo
• CodeSandbox Example
• Angular Version: 14
• Angular Material Version: 14
• ngx-mat-select-search: 5.0.0

[macjohnny]

@RitamChakraborty thanks for reporting! would you like to investigate this issue and find a fix?

[RitamChakraborty]

@RitamChakraborty thanks for reporting! would you like to investigate this issue and find a fix?

Sure I'll definitely give it a try.

[benmesza]

Same problem

[macjohnny]

can you try to ensure the selected option is always present among the mat-option elements? otherwise it is de-selected by mat-select. so maybe it would be enough to conditionally enable a helper mat-option element that has the selected value and is placed outside of the cdk virtual scroll viewport.

Please also try using the latest version 7.0.0 in combination with the mdc-based MatSelectModule from @angular/material@15

[JWess]

Same issue. The whole point of the virtual scroll is that not all the <mat-option> are in the DOM at any given time, but <mat-select> seems to require a <mat-option> to be present if it is to show as selected in the <mat-select> itself.