bug(material-autocomplete): keyboard interaction doesn't work properly when using cdk-virtual-scroll-viewport
- 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
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