components icon indicating copy to clipboard operation
components copied to clipboard

bug(material-autocomplete): keyboard interaction doesn't work properly when using cdk-virtual-scroll-viewport

Open vekunz opened this issue 6 years ago • 6 comments
trafficstars

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-5rmvpq

Steps to reproduce:

  1. Click in the input field to open the autocomplete
  2. On the keyboard click many times on the "down" key or the "up" key

Expected Behavior

If the focus goes beyond the visible viewport, the list should automaticly scroll down/up

Actual Behavior

It just doesn't scroll, and if the end of the actuall renderd items is reached, it comes back to the start and doesn't render new items.

By the way we had to implement a little hack that the virtual viewport is correctly rendert at all. It is the (opened)-Event at the mat-autocomplete you can see in the stackblitz example.

Environment

  • Angular: 8.x
  • CDK/Material: 8.x
  • Browser(s): Tested in Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Tested with Windows

vekunz avatar Jul 24 '19 14:07 vekunz

Any updates on this matter? will it be addressed on any upcoming release?

Thank you!

leonardochaia avatar Nov 11 '19 18:11 leonardochaia

Hi! Any update on this issue ?

jhernandez73 avatar Dec 03 '19 17:12 jhernandez73

Any updates on this?

vekunz avatar Mar 03 '20 07:03 vekunz

This is currently unsupported and blocked by https://github.com/angular/components/issues/10122. It's unknown at this time if, once virtual scrolling is supported by mat-autocomplete, users will be able to provide their own cdk-virtual-scroll-viewport.

Splaktar avatar Aug 24 '20 19:08 Splaktar

Hi All,

We have been using Angular 17 and Angular Material 14.2.7 in our application. The same issue exists in the latest version as well. Is it possible to provide a workaround solution or prioritize this issue as high and provide a fix?

babudurairaji avatar Jun 04 '24 08:06 babudurairaji

Hi All,

We have been using Angular 17 and Angular Material 14.2.7 in our application. The same issue exists in the latest version as well. Is it possible to provide a workaround solution or prioritize this issue as high and provide a fix?

I found this in another thread as a workaround, doesn't seem like it'll be fixed anytime soon unfortunately. https://www.npmjs.com/package/ngx-virtual-select-field

brobeans1320 avatar Aug 05 '24 15:08 brobeans1320