angular / angular/components

Reuse of radio buttons in virtual-scroll is buggy

Open
#16,658 2 comments 6 reactions 0 assignees View on GitHub
area: cdk/scrolling area: material/radio 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-nxy8dk

Steps to reproduce:
1. Scroll the upper list back and forth (sometimes it takes a bit, so a little bit more scrolling)
2. see that some radio buttons are not selected anymore

If I take the templateCache out, it works like expected!

#### Expected Behavior

What behavior were you expecting to see?
one radio button is checked

#### Actual Behavior

What behavior did you actually see?
on some items, none radio button is checked.

#### Environment

- Angular: 8.2.0
- CDK/Material: 8.1.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Fedora, macOS

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the Angular virtual-scroll behavior when templateCache is enabled. Verify how radio-button state changes as the upper list is scrolled back and forth; done means exactly one radio button remains selected for each affected item.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.