From 568591859ba6e176a890000e2b37054d8238c6e0 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 24 Aug 2019 18:06:01 +0200
Subject: [PATCH] fix(tabs): unnecessarily adding pagination when changing to
 new list of tabs with same labels

These changes fix an issue where swapping out the list of tabs to one with the same labels causes the header to add a pagination when it doesn't have to. It looks like issue comes down to the fact that we check the element dimensions before they've had the chance to update. This works for the case where the tabs have different text, because we also have a `MutationObserver` that looks at them and it fires a bit later.

Fixes #16789.
---
 src/material/tabs/paginated-tab-header.ts         |  3 ++-
 src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 10 ++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts
index 186a30da0e29..52b296ebfe15 100644
--- a/src/material/tabs/paginated-tab-header.ts
+++ b/src/material/tabs/paginated-tab-header.ts
@@ -192,7 +192,8 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
     // On dir change or window resize, realign the ink bar and update the orientation of
     // the key manager if the direction has changed.
     merge(dirChange, resize, this._items.changes).pipe(takeUntil(this._destroyed)).subscribe(() => {
-      realign();
+      // We need to defer this to give the browser some time to recalculate the element dimensions.
+      Promise.resolve().then(realign);
       this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
     });
 
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index 162c09870bb1..22d029a3ddd5 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -142,27 +142,29 @@ describe('MatTabNavBar', () => {
       expect(tabLinkElement.classList).toContain('mat-tab-disabled');
     });
 
-    it('should re-align the ink bar when the direction changes', () => {
+    it('should re-align the ink bar when the direction changes', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
       dirChange.next();
+      tick();
       fixture.detectChanges();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
-    it('should re-align the ink bar when the tabs list change', () => {
+    it('should re-align the ink bar when the tabs list change', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
       fixture.componentInstance.tabs = [1, 2, 3, 4];
       fixture.detectChanges();
+      tick();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
     it('should re-align the ink bar when the tab labels change the width', done => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;