fix(material/tabs): ensure the ink bar realigns when the tab header items have changed in dimensions

Author: hilts-vaughan

src/material/tabs/paginated-tab-header.ts

@@ -31,8 +31,17 @@ import {
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
 import {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
-import {merge, of as observableOf, Subject, timer, fromEvent} from 'rxjs';
-import {take, takeUntil} from 'rxjs/operators';
+import {
+  merge,
+  of as observableOf,
+  Subject,
+  EMPTY,
+  Observer,
+  Observable,
+  timer,
+  fromEvent,
+} from 'rxjs';
+import {take, switchMap, startWith, skip, takeUntil} from 'rxjs/operators';
 import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
@@ -218,7 +227,7 @@ export abstract class MatPaginatedTabHeader
 
     // 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)
+    merge(dirChange, resize, this._items.changes, this._itemsResized())
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => {
         // We need to defer this to give the browser some time to recalculate
@@ -246,6 +255,41 @@ export abstract class MatPaginatedTabHeader
     });
   }
 
+  /** A method responsible for sending any change that could affect layout about
+   * the items in this tab bar.
+   */
+  private _itemsResized(): Observable<void> {
+    if (typeof ResizeObserver !== 'function') {
+      return EMPTY;
+    }
+
+    return this._items.changes.pipe(
+      startWith(this._items),
+      switchMap(
+        (tabItems: QueryList<MatPaginatedTabHeaderItem>) =>
+          new Observable((observer: Observer<void>) =>
+            this._ngZone.runOutsideAngular(() => {
+              const resizeObserver = new ResizeObserver(() => {
+                observer.next();
+              });
+              tabItems.forEach(item => {
+                resizeObserver.observe(item.elementRef.nativeElement);
+              });
+              return () => {
+                resizeObserver.disconnect();
+              };
+            }),
+          ),
+      ),
+      // Skip the first emit since the resize observer emits when an item
+      // is observed for new items when the tab is already inserted
+      skip(1),
+
+      // Fire initial resize so the DOM can adjust the very first time
+      startWith(undefined),
+    );
+  }
+
   ngAfterContentChecked(): void {
     // If the number of tab labels have changed, check if scrolling should be enabled
     if (this._tabLabelCount != this._items.length) {

src/material/tabs/tab-header.spec.ts

@@ -636,6 +636,23 @@ describe('MatTabHeader', () => {
       discardPeriodicTasks();
     }));
 
+    it('should re-align the ink bar when the size of a tab changes', fakeAsync(() => {
+      fixture = TestBed.createComponent(SimpleTabHeaderApp);
+      fixture.detectChanges();
+
+      const inkBar = fixture.componentInstance.tabHeader._inkBar;
+
+      spyOn(inkBar, 'alignToElement');
+
+      // Change font-size which would trigger a container width change
+      (fixture.elementRef.nativeElement as HTMLElement).style.fontSize = '20px';
+      tick(150);
+      fixture.detectChanges();
+
+      expect(inkBar.alignToElement).toHaveBeenCalled();
+      discardPeriodicTasks();
+    }));
+
     it('should update arrows when the window is resized', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);