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

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.

(cherry picked from commit 8cdd3d7)

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

@@ -82,6 +82,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

@@ -76,6 +76,7 @@ export abstract class MatPaginatedTabHeader
   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>;
 
@@ -452,7 +453,7 @@ export abstract class MatPaginatedTabHeader
       labelBeforePos = offsetLeft;
       labelAfterPos = labelBeforePos + offsetWidth;
     } else {
-      labelAfterPos = this._tabList.nativeElement.offsetWidth - offsetLeft;
+      labelAfterPos = this._tabListInner.nativeElement.offsetWidth - offsetLeft;
       labelBeforePos = labelAfterPos - offsetWidth;
     }
 
@@ -481,7 +482,7 @@ export abstract class MatPaginatedTabHeader
       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;
@@ -523,7 +524,7 @@ export abstract class MatPaginatedTabHeader
    * 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

@@ -97,6 +97,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

@@ -167,6 +167,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; }]>;