angular / angular/components

Material Tabs + No Template Caching => Broken Virtual Scroll

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

Description

### Description

If you attempt a ***cdkVirtualFor** with a **templateCacheSize: 0**, the Virtual Scroll will break when you include a **Material Tab** in the repeated element.

### Reproduction

[StackBlitz ](https://stackblitz.com/edit/el4pji?file=src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.ts,src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.html,src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.css)

Steps to reproduce:
1. Try scrolling.

### Expected Behavior

No broke.

### Actual Behavior

Broke.

### Workaround
Disable **Material Tab** pagination as so:

### Environment

Angular CLI: 16.0.0
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 16.0.0
... animations, cdk, cdk-experimental, cli, common, compiler
... compiler-cli, core, forms, material, platform-browser
... platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.0
@angular-devkit/build-angular 16.0.0
@angular-devkit/core 16.0.0
@angular-devkit/schematics 16.0.0
@angular/fire 7.6.1
@schematics/angular 16.0.0
rxjs 7.8.1
typescript 4.9.5

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/example/cdk-virtual-scroll-template-cache-example.ts and its HTML and CSS files, and reproduce scrolling with templateCacheSize set to 0. Compare the behavior with Material Tab pagination disabled. Done means the virtual scroll remains functional with Material Tabs and no template caching, without relying on the workaround.

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.