fix(material/tabs): update MatTab _scrollToLabel function to always display a label from its start (#26736)

Author: clamli

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

@@ -272,9 +272,7 @@ describe('MatTabHeader', () => {
         // Focus on the last tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1;
         fixture.detectChanges();
-        expect(appComponent.tabHeader.scrollDistance).toBe(
-          appComponent.tabHeader._getMaxScrollDistance(),
-        );
+        expect(appComponent.tabHeader.scrollDistance).toBe(182);
 
         // Focus on the first tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = 0;
@@ -331,9 +329,7 @@ describe('MatTabHeader', () => {
         // Focus the last tab so the header scrolls to the end.
         appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1;
         fixture.detectChanges();
-        expect(appComponent.tabHeader.scrollDistance).toBe(
-          appComponent.tabHeader._getMaxScrollDistance(),
-        );
+        expect(appComponent.tabHeader.scrollDistance).toBe(182);
 
         // Remove the first two tabs which includes the selected tab.
         appComponent.tabs = appComponent.tabs.slice(2);
@@ -362,9 +358,7 @@ describe('MatTabHeader', () => {
         // Focus on the last tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1;
         fixture.detectChanges();
-        expect(appComponent.tabHeader.scrollDistance).toBe(
-          appComponent.tabHeader._getMaxScrollDistance(),
-        );
+        expect(appComponent.tabHeader.scrollDistance).toBe(190);
 
         // Focus on the first tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = 0;

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

@@ -57,12 +57,6 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({
  */
 export type ScrollDirection = 'after' | 'before';
 
-/**
- * The distance in pixels that will be overshot when scrolling a tab label into view. This helps
- * provide a small affordance to the label next to it.
- */
-const EXAGGERATED_OVERSCROLL = 60;
-
 /**
  * Amount of milliseconds to wait before starting to scroll the header automatically.
  * Set a little conservatively in order to handle fake events dispatched on touch devices.
@@ -524,10 +518,13 @@ export abstract class MatPaginatedTabHeader
 
     if (labelBeforePos < beforeVisiblePos) {
       // Scroll header to move label to the before direction
-      this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
+      this.scrollDistance -= beforeVisiblePos - labelBeforePos;
     } else if (labelAfterPos > afterVisiblePos) {
       // Scroll header to move label to the after direction
-      this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
+      this.scrollDistance += Math.min(
+        labelAfterPos - afterVisiblePos,
+        labelBeforePos - beforeVisiblePos,
+      );
     }
   }
 

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

@@ -266,9 +266,7 @@ describe('MDC-based MatTabHeader', () => {
         // Focus on the last tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1;
         fixture.detectChanges();
-        expect(appComponent.tabHeader.scrollDistance).toBe(
-          appComponent.tabHeader._getMaxScrollDistance(),
-        );
+        expect(appComponent.tabHeader.scrollDistance).toBe(182);
 
         // Focus on the first tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = 0;
@@ -329,9 +327,7 @@ describe('MDC-based MatTabHeader', () => {
         // Focus the last tab so the header scrolls to the end.
         appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1;
         fixture.detectChanges();
-        expect(appComponent.tabHeader.scrollDistance).toBe(
-          appComponent.tabHeader._getMaxScrollDistance(),
-        );
+        expect(appComponent.tabHeader.scrollDistance).toBe(182);
 
         // Remove the first two tabs which includes the selected tab.
         appComponent.tabs = appComponent.tabs.slice(2);
@@ -360,9 +356,7 @@ describe('MDC-based MatTabHeader', () => {
         // Focus on the last tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1;
         fixture.detectChanges();
-        expect(appComponent.tabHeader.scrollDistance).toBe(
-          appComponent.tabHeader._getMaxScrollDistance(),
-        );
+        expect(appComponent.tabHeader.scrollDistance).toBe(190);
 
         // Focus on the first tab, expect this to be the maximum scroll distance.
         appComponent.tabHeader.focusIndex = 0;