virtual-scroll doesn't work well with animate.leave
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Which @angular/* package(s) are the source of the bug?
virtual-scroll
### Is this a regression?
No
### Description
1. With a default `cdkVirtualForTemplateCacheSize` set to `20` virtuall-scroll keeps `leave` class on a template and uses this template for next row generation; in that case, new rows turn out to be `hidden`.
2. With a `cdkVirtualForTemplateCacheSize` set to `0` to disable cache virtuall-scroll do not remove rows while slow/normal scroll speed, and only removes on a high speed scrolling.
### Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-n4xn2i7p?file=src%2Fmain.ts
### Please provide the exception or error you saw
```true
```
### Please provide the environment you discovered this bug in (run `ng version`)
```true
Angular CLI : 21.2.2
Angular : 21.2.4
Node.js : 22.22.0
Package Manager : npm 10.8.2
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations │ 21.2.4 │ ^21.2.4 │
│ @angular/build │ 21.2.2 │ ^21.2.2 │
│ @angular/cli │ 21.2.2 │ ^21.2.2 │
│ @angular/common │ 21.2.4 │ ^21.2.4 │
│ @angular/compiler │ 21.2.4 │ ^21.2.4 │
│ @angular/compiler-cli │ 21.2.4 │ ^21.2.4 │
│ @angular/core │ 21.2.4 │ ^21.2.4 │
│ @angular/forms │ 21.2.4 │ ^21.2.4 │
│ @angular/material │ 21.2.2 │ ^21.2.2 │
│ @angular/platform-browser │ 21.2.4 │ ^21.2.4 │
│ @angular/router │ 21.2.4 │ ^21.2.4 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 5.9.3 │ ^5.9.3 │
│ zone.js │ 0.16.0 │ ^0.16.0 │
└───────────────────────────┴───────────────────┴───────────────────┘
```
### Anything else?
_No response_
Contributor guide
Research direction
Start with the linked StackBlitz reproduction in src/main.ts and reproduce both cdkVirtualForTemplateCacheSize settings while scrolling. Trace the virtual-scroll entry point and animation behavior; done means cached rows no longer retain the leave class or become hidden, and uncached rows are removed during slow and normal scrolling as well as fast scrolling.
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