Components: Material Tabs with lazy loading rendering duplicate content

[shawnbusuttil]

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?

[geromegrignon]

please provide a StackBlitz reproduction

[shawnbusuttil]

Updated to include implementation on StackBlitz.

[pawelgur]

Another example based on material stackblitz template: https://stackblitz.com/edit/angular-vxdxkj

It can be reproduced by clicking quickly on tab headers in following order: 2, 3, 1.
After this content on second tab will be duplicated.

It seems like an animation issue, because disabling it (putting [@.disabled]="true" on tab group) solves the issue.

[frederikprijck]

Any information on this? We've been experiencing the exact same behavior with @angular/material 7.2.1. We can, temporarily, work around it by adding [@.disabled]="true" on the MatTabGroup as mentioned by @pawelgur .

[manklu]

Duplicate of https://github.com/angular/material2/issues/10938

[vanmxpx]

8.1.1
Still reproduced

[jmalStorm]

8.2.3
Still there