angular / angular/components

Virtual Scrolling stalls when scrolling via keyboard with large set of complex data

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

Description

#### Bug, feature request, or proposal: Bug

#### What is the expected behavior?
When scrolling down the list by holding down the up or down arrow key, the list should scroll smoothly all the way down to the end

#### What is the current behavior?
When scrolling down the list by holding down the up or down arrow key, at random times and seemingly random circumstances, the scrolling behavior stalls. I believe the focus is being lost on the list for whatever reason as, if you click on the list and press the arrow key, scrolling resumes as normal.

#### What are the steps to reproduce?
StackBlitz [here](https://stackblitz.com/edit/angular-material-yhc71v). Click on the list and press and hold the down arrow key. It may take a couple attempts, but eventually it should stall.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Reproduced in Chrome 71.0.3578.98 and IE 11. Could not reproduce in Firefox 64.0.

|Package|Version|
|---|---|
|@angular/animations|7.2.0|
|@angular/cdk|7.2.1|
|@angular/common|7.2.0|
|@angular/compiler|7.2.0|
|@angular/core|7.2.0|
|@angular/forms|7.2.0|
|@angular/http|7.2.0|
|@angular/material|7.2.1|
|@angular/platform-browser|7.2.0|
|@angular/platform-browser-dynamic|7.2.0|
|@angular/router|7.2.0|
|core-js|2.6.1|
|rxjs|6.3.3|
|rxjs-compat|6.3.3|
|zone.js|0.8.26|

#### Is there anything else we should know?
Resource-bound maybe?

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and confirm that holding the down arrow eventually stalls in Chrome or IE, while Firefox is unaffected. Trace the virtual scrolling list's keyboard interaction and focus behavior from that reproduction. Done means a large complex-data list scrolls continuously to the end with the arrow key and the regression is covered by an appropriate test.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.