Revert "fix(tabs): duplicate animation events on some browsers (#13674)" (#14015)

This reverts commit 28e3d36.

This change caused a problem in at least one Google app where tabs
inside of a dialog would end up in some kind of frozen animation state
and not rendering.

Author: jelbourn

src/lib/tabs/tab-body.html

@@ -1,6 +1,6 @@
 <div class="mat-tab-body-content" #content
      [@translateTab]="_position"
      (@translateTab.start)="_onTranslateTabStarted($event)"
-     (@translateTab.done)="_translateTabComplete.next($event)">
+     (@translateTab.done)="_onTranslateTabComplete($event)">
   <ng-template matTabBodyHost></ng-template>
 </div>

src/lib/tabs/tab-body.ts

@@ -28,9 +28,9 @@ import {
 import {AnimationEvent} from '@angular/animations';
 import {TemplatePortal, CdkPortalOutlet, PortalHostDirective} from '@angular/cdk/portal';
 import {Directionality, Direction} from '@angular/cdk/bidi';
-import {Subscription, Subject} from 'rxjs';
+import {Subscription} from 'rxjs';
 import {matTabsAnimations} from './tabs-animations';
-import {startWith, distinctUntilChanged} from 'rxjs/operators';
+import {startWith} from 'rxjs/operators';
 
 /**
  * These position states are used internally as animation states for the tab body. Setting the
@@ -125,9 +125,6 @@ export class MatTabBody implements OnInit, OnDestroy {
   /** Tab body position state. Used by the animation trigger for the current state. */
   _position: MatTabBodyPositionState;
 
-  /** Emits when an animation on the tab is complete. */
-  _translateTabComplete = new Subject<AnimationEvent>();
-
   /** Event emitted when the tab begins to animate towards the center as the active tab. */
   @Output() readonly _onCentering: EventEmitter<number> = new EventEmitter<number>();
 
@@ -169,21 +166,6 @@ export class MatTabBody implements OnInit, OnDestroy {
         changeDetectorRef.markForCheck();
       });
     }
-
-    // Ensure that we get unique animation events, because the `.done` callback can get
-    // invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.
-    this._translateTabComplete.pipe(distinctUntilChanged((x, y) => {
-      return x.fromState === y.fromState && x.toState === y.toState;
-    })).subscribe(event => {
-      // If the transition to the center is complete, emit an event.
-      if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {
-        this._onCentered.emit();
-      }
-
-      if (this._isCenterPosition(event.fromState) && !this._isCenterPosition(this._position)) {
-        this._afterLeavingCenter.emit();
-      }
-    });
   }
 
   /**
@@ -198,17 +180,27 @@ export class MatTabBody implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this._dirChangeSubscription.unsubscribe();
-    this._translateTabComplete.complete();
   }
 
-  _onTranslateTabStarted(event: AnimationEvent): void {
-    const isCentering = this._isCenterPosition(event.toState);
+  _onTranslateTabStarted(e: AnimationEvent): void {
+    const isCentering = this._isCenterPosition(e.toState);
     this._beforeCentering.emit(isCentering);
     if (isCentering) {
       this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
     }
   }
 
+  _onTranslateTabComplete(e: AnimationEvent): void {
+    // If the transition to the center is complete, emit an event.
+    if (this._isCenterPosition(e.toState) && this._isCenterPosition(this._position)) {
+      this._onCentered.emit();
+    }
+
+    if (this._isCenterPosition(e.fromState) && !this._isCenterPosition(this._position)) {
+      this._afterLeavingCenter.emit();
+    }
+  }
+
   /** The text direction of the containing app. */
   _getLayoutDirection(): Direction {
     return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';

src/lib/tabs/tab-group.spec.ts

@@ -225,7 +225,7 @@ describe('MatTabGroup', () => {
       fixture.detectChanges();
       tick();
 
-      expect(fixture.componentInstance.animationDone).toHaveBeenCalledTimes(1);
+      expect(fixture.componentInstance.animationDone).toHaveBeenCalled();
     }));
 
     it('should add the proper `aria-setsize` and `aria-posinset`', () => {

src/lib/tabs/tab-group.ts

@@ -310,16 +310,15 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
 
   /** Removes the height of the tab body wrapper. */
   _removeTabBodyWrapperHeight(): void {
-    const wrapper = this._tabBodyWrapper.nativeElement;
-    this._tabBodyWrapperHeight = wrapper.clientHeight;
-    wrapper.style.height = '';
+    this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight;
+    this._tabBodyWrapper.nativeElement.style.height = '';
     this.animationDone.emit();
   }
 
   /** Handle click events, setting new selected index if appropriate. */
-  _handleClick(tab: MatTab, tabHeader: MatTabHeader, index: number) {
+  _handleClick(tab: MatTab, tabHeader: MatTabHeader, idx: number) {
     if (!tab.disabled) {
-      this.selectedIndex = tabHeader.focusIndex = index;
+      this.selectedIndex = tabHeader.focusIndex = idx;
     }
   }