Mat-Autocomplete with cdk-virtual-scroll-viewport (large data) arrow-keys didnt work

I am trying to use Mat-Autocomplete with large data. For the large data aspect im using a cdk-virtual-scroll-viewport with Mat-Autocomplete. Everything works except the Arrow-Key Navigation.

<mat-autocomplete
[isRea]
autoActiveFirstOption
#auto="matAutocomplete"
(opened)="isOpen = true; doOpen()"
(closed)="isOpen = false; save()"
>
<ng-container *ngIf="!disabled">
<cdk-virtual-scroll-viewport [ngStyle]="{ height: height }" itemSize="25">
<mat-option *cdkVirtualFor="let item of filteredItems" [value]="item.text">
{{ item.text }}
</mat-option>
</cdk-virtual-scroll-viewport>
</ng-container>
</mat-autocomplete>


How can i make the Arrow-Keys work for the Navigaton through the Options? Or is there another way to load large data with an Autocomplete?

Continue reading...