fix(material/tabs): wrong scroll distance if selected tab is removed (#24118)

Fixes the case where the user has scrolled to the end of the tab list and the selected tab from the beginning is removed. Since we no longer have a selected tab, the scroll distance wasn't being updated.

Fixes #24117.

(cherry picked from commit 0a4fdb2)

Author: crisbeto

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

@@ -308,6 +308,28 @@ describe('MDC-based MatTabHeader', () => {
           .withContext('Expected no ripple to show up after mousedown')
           .toBe(0);
       });
+
+      it('should update the scroll distance if a tab is removed and no tabs are selected', fakeAsync(() => {
+        appComponent.selectedIndex = 0;
+        appComponent.addTabsForScrolling();
+        fixture.detectChanges();
+
+        // 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(),
+        );
+
+        // Remove the first two tabs which includes the selected tab.
+        appComponent.tabs = appComponent.tabs.slice(2);
+        fixture.detectChanges();
+        tick();
+
+        expect(appComponent.tabHeader.scrollDistance).toBe(
+          appComponent.tabHeader._getMaxScrollDistance(),
+        );
+      }));
     });
 
     describe('rtl', () => {

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

@@ -213,7 +213,16 @@ export abstract class MatPaginatedTabHeader
         // We need to defer this to give the browser some time to recalculate
         // the element dimensions. The call has to be wrapped in `NgZone.run`,
         // because the viewport change handler runs outside of Angular.
-        this._ngZone.run(() => Promise.resolve().then(realign));
+        this._ngZone.run(() => {
+          Promise.resolve().then(() => {
+            // Clamp the scroll distance, because it can change with the number of tabs.
+            this._scrollDistance = Math.max(
+              0,
+              Math.min(this._getMaxScrollDistance(), this._scrollDistance),
+            );
+            realign();
+          });
+        });
         this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
       });
 

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

@@ -305,6 +305,28 @@ describe('MatTabHeader', () => {
           .withContext('Expected no ripple to show up after mousedown')
           .toBe(0);
       });
+
+      it('should update the scroll distance if a tab is removed and no tabs are selected', fakeAsync(() => {
+        appComponent.selectedIndex = 0;
+        appComponent.addTabsForScrolling();
+        fixture.detectChanges();
+
+        // 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(),
+        );
+
+        // Remove the first two tabs which includes the selected tab.
+        appComponent.tabs = appComponent.tabs.slice(2);
+        fixture.detectChanges();
+        tick();
+
+        expect(appComponent.tabHeader.scrollDistance).toBe(
+          appComponent.tabHeader._getMaxScrollDistance(),
+        );
+      }));
     });
 
     describe('rtl', () => {