angular / angular/components

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

Offen
#16,598 6 Kommentare 16 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/scrolling area: material/autocomplete P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und untersuche die Tastaturinteraktion von Angular Material autocomplete und CDK virtual-scroll. Überprüfe das Verhalten bei wiederholtem Drücken der Aufwärts-/Abwärtstasten, einschließlich der Bewegung über den sichtbaren Viewport hinaus und bis zur Grenze der gerenderten Elemente. Erledigt bedeutet, dass die Tastaturnavigation scrollt und die entsprechenden Elemente rendert, anstatt zum Anfang zurückzuspringen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.