angular / angular/components

Material Tabs with lazy loading rendering duplicate content

Open
#12,906 8 comments 7 reactions 0 assignees View on GitHub
area: material/tabs P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Material tabs (with `matTabContent`) are rendering multiple instances of the tab body inside the same tab when switching away and back too fast.

#### What is the expected behavior?
Not seeing duplicate content.

#### What is the current behavior?
There are multiple instances of the same body/content inside.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-jwxe85
Switch back and forth quickly on these tabs and pay attention to what happens to the one in the middle. You will notice content being rendered multiple times.

#### What is the use-case or motivation for changing an existing behavior?

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

#### Is there anything else we should know?

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and rapidly switch the Material tabs using matTabContent to observe the duplicate bodies. Trace the lazy-loading behavior involved in tab changes, then verify that switching away and back quickly leaves only one instance of each tab body.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.