10

I try to use the cdk-virtual-scroll inside a mat-autocomplete: 

<mat-form-field>
  <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl2"
     [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <cdk-virtual-scroll-viewport class="autocomplete-test-viewport" itemSize="50" minBufferPx="500" maxBufferPx="750">
      <mat-option *cdkVirtualFor="let option of options" [value]="option" class="autocomplete-item">
      {{option}}
      </mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-autocomplete>

However the virtual scroll works irregularly in this setup. I generate 200 options but if i scroll slowly by using the scrollbar down arrow (chrome) it stalls around 14. Similar setup with a mat-select doesn't have this problem.

See https://stackblitz.com/edit/angular-xv1n2e?file=src/app/app.component.html for the whole example setup (mat-autocomplete and mat-select with the cdk-virtual-scroll).

Has anyone a working mat-autocomplete with the cdk-virtual-scroll?

IHaanstra
  • 196
  • 1
  • 9
  • Take a look at this demos...https://github.com/angular/material2/blob/31fd6a216b4155a219bb3c3f4eadb9dfa7c12ac0/src/demo-app/virtual-scroll/virtual-scroll-demo.html – WSD Apr 16 '19 at 14:44
  • I'm having issues with this as well. Have you manage to solve this? – yccteam Jan 16 '21 at 10:43
  • @yccteam, sorry haven't tried it anymore. – IHaanstra Apr 09 '21 at 06:58
  • I come with a more disturbing comment. Sometimes, when I try to scroll up, it keeps on scrolling down. Scrolling with the arrows really create some weird stuff to happen. – Buu97 Jun 17 '21 at 11:01

1 Answers1

1

I check your code and made some tests to understant the strange behaviour. If you subscribe to the scrolledIndexChange output event on the CdkVirtualScrollViewport, and log the index in console, you can see that :

  • When you use the wheel, always an exact number of items are scrolled (2 for me) so the scroll index will change this way : 0 -> 2 -> 4 -> 6 ...
  • When you click on the down arrow of the scroll bar you can see
    that a scroll step don't match exactly to one item height. And the
    scroll change this way 1 -> 2 -> 3 -> 4 -> 5 -> 4 -> 5 -> 4 ... and
    loop between two values.

A solution should be to fix the scroll step (don't know how to do this yet) so if the user clicks on scrollbar (top or down), scroll exactly the height of one item.

Other solution, use the scrollToIndex method of the CdkVirtualScrollViewport to scroll to the next / previous index when user clicks on top / down arrow of scroll bar (but not when user use wheel to scroll)

thib_o_o
  • 156
  • 5