Material Tabs with lazy loading rendering duplicate content
- 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
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