[BUG] When used with cdk-virtual-scroll-viewport it doesn't display the value

[tricasoft]

Describe the bug
When used with cdk-virtual-scroll-viewport with a big list of items, it doesn't display the value in the input after selecting a searched item.

Check the bellow code:
<mat-select formControlName="solCompany" placeholder="Sol Company" #singleSelect1 (selectionChange)="getList()">

<ngx-mat-select-search [formControl]="filterSolString" [placeholderLabel]="'Search Company'">

<cdk-virtual-scroll-viewport [itemSize]="42" [style.height.px]=4*42>
<mat-option [value]="-1">Any
<mat-option *cdkVirtualFor="let company of utils.getObjectKeys(filteredSolCompany | async)" [value]="company">{{companies[company]}}

Expected behavior
Select the item and display it in the input field

Screenshots

Desktop (please complete the following information):

[macjohnny]

Thanks for reporting.
Do you think this could apply to your situation?
#285 (comment)

it would be great if you could setup a quick demo on stackblitz for further investigation

[tricasoft]

Thanks for replying, sorry for writing so late...

I made a stackblitz:
https://github-9fxc91.stackblitz.io

If you search for Bank Q and select it, you'll see that the field remains empty afterwards...

It would be nice if you can help me spot the issue, because I have some big lists I want to display and I can't use the cdkVirtualFor because of this... and it's very slow with *ngFor...

Many thanks in advance!

[pnguyen535]

I know it's too late, but hopefully it will help someone down the road. I fixed my issue by not filter on the '' value.

this.filterSolString.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(value => {
if (value !== '') {

    }
  });

added an open event on :

<mat-select placeholder="" (openedChange)="openedDrawingIdChange($event)">

openedChange($event: boolean) {
if ($event) {
this.filterSolString$.next();
}
}

}

[tricasoft]

Could you make a stackblitz so I can see the whole code? I didn't get exactly what you mean and I really need the fix.

Many thanks!

[tricasoft]

Has anyone any idea how to fix this StackBlitz?
https://stackblitz.com/edit/github-9fxc91
If you search for "q" and select "Bank Q", then it disappears, not showing as selected...

[jameskaye]

@macjohnny Is there a recommended way to support virtual/infinite scroll with ngx-mat-select-search? I see the stackblitz example in this repo is commented out, and based on this thread it seems that cdk-virtual-scroll isn't supported either.

[macjohnny]

@jameskaye the infinitescroll example was commented out to be able to upgrade the angular version, but it should work. You can also help by creating an up-to-date example in this repo.

if someone would like to propose a working example with virtual scroll id be happy to review it.