[Tabs] Toggling quickly can cause content to be duplicated

Bug, feature request, or proposal:

I have had some trouble reproducing this one reliably (it seems to occur more often on my app than in reproductions) but there seems to be a race condition related to the rendering of tab content when it is lazy-loaded.

What is the expected behavior?

Tab content should only be displayed once.

What is the current behavior?

Toggling tabs very quickly (using arrow keys + space bar) can cause tab content to be drawn multiple times.

What are the steps to reproduce?

StackBlitz: https://stackblitz.com/edit/angular-material2-issue-h6pgut?file=app%2Fapp.component.ts

I am intentionally trying to be awkward in terms of timing (ie. setting the selectedTabIndex in a timeout), but this behaviour still should not happen.

I have recorded a reproduction in this video: https://gfycat.com/ReadyFairBasil Note that at the start there is only one instance of each tab’s content but by the end the second tab’s content is duplicated.

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

Bug

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

Latest StackBlitz (Angular 6-rc2, Material 6-rc1)

Is there anything else we should know?

I could only reproduce by using lazy-loaded tabs + NgForTrackBy + OnPush + window.setTimeout, but these may not be necessary. I also had to use keyboard selection to toggle fast enough to trigger the issue.

[manklu]

@benelliott The problem is the animation. If you disable it, the problem disappears.

<mat-tab-group [@.disabled]="true">
  <mat-tab *ngFor="let tab of tabs" [label]="tab">
    <div *matTabContent class="content">
      {{tab}}
    </div>
  </mat-tab>
</mat-tab-group>

This would also fit the ~500ms observation from @xyz247.

Possibly related to https://github.com/angular/angular/issues/26133

[joelcoxokc]

Simple Workaround

This only works if you have only one base element inside each tabContent template

For Example

<mat-tab-group>
    <mat-tab>
        <ng-template matTabContent>
            <div class="tab-container">
                <!-- Content goes here -->
            </div>
        </ng-template>
    </mat-tab>
    <mat-tab>
        <ng-template matTabContent>
            <div class="tab-container">
                <!-- Content goes here -->
            </div>
        </ng-template>
    </mat-tab>
</mat-tab-group>

Listen to the output on the <mat-tab-group> for (animationDone)

<mat-tab-group (animationDone)="onTabAnimationDone()">

On Animation done, we want to look for any additional .tab-containers that have been rendered inside the active tab.

export class MyComponent {
    constructor(private elementRef: ElementRef) {}

    public onTabAnimationDone(): void {
        const inactiveTabs = this.elementRef.nativeElement.querySelectorAll(
            '.mat-tab-body-active .mat-tab-body-content > .tab-container:not(:first-child)'
        );
        
        inactiveTabs.forEach(tab => tab.remove());
    }
}