angular / angular/components

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

Open
#16,598 6 comments 16 reactions 0 assignees View on GitHub
area: cdk/scrolling area: material/autocomplete P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the Angular Material autocomplete and CDK virtual-scroll keyboard interaction. Verify behavior with repeated up/down key presses, including moving beyond the visible viewport and reaching the rendered-item boundary. Done means keyboard navigation scrolls and renders the appropriate items instead of wrapping to the start.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.