From 5b6b794c96aef5c95f16c77b5573ac0c2f4e3c2e Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 29 Oct 2017 12:07:33 +0100
Subject: [PATCH] fix(tabs): pagination not enabled on init on some browsers

Fixes an issue where the tabs pagination may not be enabled on some slower browsers, because elements are being measured before they're done rendering.

Fixes #7983.
---
 src/lib/tabs/tab-header.spec.ts |  5 +++--
 src/lib/tabs/tab-header.ts      | 11 +++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts
index 77cc4d680389..8ccd1ef952dc 100644
--- a/src/lib/tabs/tab-header.spec.ts
+++ b/src/lib/tabs/tab-header.spec.ts
@@ -243,7 +243,7 @@ describe('MatTabHeader', () => {
       });
     });
 
-    it('should re-align the ink bar when the direction changes', () => {
+    it('should re-align the ink bar when the direction changes', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
 
       const inkBar = fixture.componentInstance.tabHeader._inkBar;
@@ -253,9 +253,10 @@ describe('MatTabHeader', () => {
 
       change.next();
       fixture.detectChanges();
+      tick(20); // Angular turns rAF calls into 16.6ms timeouts in tests.
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
     it('should re-align the ink bar when the window is resized', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts
index e7b3f26e391e..128f9600acc4 100644
--- a/src/lib/tabs/tab-header.ts
+++ b/src/lib/tabs/tab-header.ts
@@ -8,7 +8,6 @@
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
-import {startWith} from 'rxjs/operators/startWith';
 import {
   AfterContentChecked,
   AfterContentInit,
@@ -188,11 +187,15 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   ngAfterContentInit() {
     const dirChange = this._dir ? this._dir.change : observableOf(null);
     const resize = this._viewportRuler.change(150);
-
-    this._realignInkBar = merge(dirChange, resize).pipe(startWith(null)).subscribe(() => {
+    const realign = () => {
       this._updatePagination();
       this._alignInkBarToSelectedTab();
-    });
+    };
+
+    // Defer the first call in order to allow for slower browsers to lay out the elements.
+    // This helps in cases where the user lands directly on a page with paginated tabs.
+    typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();
+    this._realignInkBar = merge(dirChange, resize).subscribe(realign);
   }
 
   ngOnDestroy() {