cdk-virtual-scroll-viewport inside mat-select on scrolling in UI is dropping the DOM from...

<mat-select panelClass="selectPanelClass" [(ngModel)]="selected" (selectionChange)="change($event)" placeholder="All" class="dropdown-default" (openedChange)="openChange($event)" [disabled]="disabled" [ngClass]="{'disable-on-load': disabled}">

<cdk-virtual-scroll-viewport itemSize="48" class="search-section-list" [style.height.px]="200">
<mat-option *cdkVirtualFor="let option of filteredOptions; trackBy: trackFilteredOptions" [value]="option" title="{{ option[filter.displayTextPropertyMapFormula] }}">
{{ option[filter.displayTextPropertyMapFormula] }}
</mat-option>
</cdk-virtual-scroll-viewport>


on scrolling the [(ngModel)]="selected" is being lost or dropped

on scrolling the [(ngModel)]="selected" should be included even when scrolling takes it away from view

Continue reading...