fix(material/tabs): pagination sometimes incorrectly shown after zoom

Currently if one of the end tabs is selected and the user zooms in, we may end up showing the pagination unnecessarily. The issue comes from the fact that there's a transition on the ink bar which can cause the parent overflow while it is being measured.

These changes resolve the issue by measuring a different element.

Fixes #23724.

Author: crisbeto

src/material-experimental/mdc-tabs/tab-header.html

@@ -21,7 +21,7 @@
     class="mat-mdc-tab-list"
     role="tablist"
     (cdkObserveContent)="_onContentChanges()">
-    <div class="mat-mdc-tab-labels">
+    <div class="mat-mdc-tab-labels" #tabListInner>
       <ng-content></ng-content>
     </div>
   </div>

src/material-experimental/mdc-tabs/tab-header.ts

@@ -54,6 +54,7 @@ export class MatTabHeader extends _MatTabHeaderBase implements AfterContentInit
   @ContentChildren(MatTabLabelWrapper, {descendants: false}) _items: QueryList<MatTabLabelWrapper>;
   @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
   @ViewChild('tabList', {static: true}) _tabList: ElementRef;
+  @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
   @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
   @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
   _inkBar: MatInkBar;

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.html

@@ -12,7 +12,7 @@
 
 <div class="mat-mdc-tab-link-container" #tabListContainer (keydown)="_handleKeydown($event)">
   <div class="mat-mdc-tab-list" #tabList (cdkObserveContent)="_onContentChanges()">
-    <div class="mat-mdc-tab-links">
+    <div class="mat-mdc-tab-links" #tabListInner>
       <ng-content></ng-content>
     </div>
   </div>

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts

@@ -79,6 +79,7 @@ export class MatTabNav extends _MatTabNavBase implements AfterContentInit {
   @ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) _items: QueryList<MatTabLink>;
   @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
   @ViewChild('tabList', {static: true}) _tabList: ElementRef;
+  @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
   @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
   @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
   _inkBar: MatInkBar;

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

@@ -75,6 +75,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
   abstract _inkBar: {hide: () => void, alignToElement: (element: HTMLElement) => void};
   abstract _tabListContainer: ElementRef<HTMLElement>;
   abstract _tabList: ElementRef<HTMLElement>;
+  abstract _tabListInner: ElementRef<HTMLElement>;
   abstract _nextPaginator: ElementRef<HTMLElement>;
   abstract _previousPaginator: ElementRef<HTMLElement>;
 
@@ -442,7 +443,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
       labelBeforePos = offsetLeft;
       labelAfterPos = labelBeforePos + offsetWidth;
     } else {
-      labelAfterPos = this._tabList.nativeElement.offsetWidth - offsetLeft;
+      labelAfterPos = this._tabListInner.nativeElement.offsetWidth - offsetLeft;
       labelBeforePos = labelAfterPos - offsetWidth;
     }
 
@@ -471,7 +472,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
       this._showPaginationControls = false;
     } else {
       const isEnabled =
-          this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
+          this._tabListInner.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
 
       if (!isEnabled) {
         this.scrollDistance = 0;
@@ -513,7 +514,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
    * should be called sparingly.
    */
   _getMaxScrollDistance(): number {
-    const lengthOfTabList = this._tabList.nativeElement.scrollWidth;
+    const lengthOfTabList = this._tabListInner.nativeElement.scrollWidth;
     const viewLength = this._tabListContainer.nativeElement.offsetWidth;
     return (lengthOfTabList - viewLength) || 0;
   }

src/material/tabs/tab-header.html

@@ -16,7 +16,7 @@
     [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
     role="tablist"
     (cdkObserveContent)="_onContentChanges()">
-    <div class="mat-tab-labels">
+    <div class="mat-tab-labels" #tabListInner>
       <ng-content></ng-content>
     </div>
     <mat-ink-bar></mat-ink-bar>

src/material/tabs/tab-header.ts

@@ -90,6 +90,7 @@ export class MatTabHeader extends _MatTabHeaderBase {
   @ViewChild(MatInkBar, {static: true}) _inkBar: MatInkBar;
   @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
   @ViewChild('tabList', {static: true}) _tabList: ElementRef;
+  @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
   @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
   @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
 

src/material/tabs/tab-nav-bar/tab-nav-bar.html

@@ -15,7 +15,7 @@
     [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
     #tabList
     (cdkObserveContent)="_onContentChanges()">
-    <div class="mat-tab-links">
+    <div class="mat-tab-links" #tabListInner>
       <ng-content></ng-content>
     </div>
     <mat-ink-bar></mat-ink-bar>

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -158,6 +158,7 @@ export class MatTabNav extends _MatTabNavBase {
   @ViewChild(MatInkBar, {static: true}) _inkBar: MatInkBar;
   @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
   @ViewChild('tabList', {static: true}) _tabList: ElementRef;
+  @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
   @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
   @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
 

tools/public_api_guard/material/tabs.md

@@ -296,6 +296,8 @@ export class MatTabHeader extends _MatTabHeaderBase {
     // (undocumented)
     _tabListContainer: ElementRef;
     // (undocumented)
+    _tabListInner: ElementRef;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTabHeader, "mat-tab-header", never, { "selectedIndex": "selectedIndex"; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["_items"], ["*"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabHeader, [null, null, null, { optional: true; }, null, null, { optional: true; }]>;
@@ -406,6 +408,8 @@ export class MatTabNav extends _MatTabNavBase {
     // (undocumented)
     _tabListContainer: ElementRef;
     // (undocumented)
+    _tabListInner: ElementRef;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": "color"; }, {}, ["_items"], ["*"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, [null, { optional: true; }, null, null, null, null, { optional: true; }]>;