fix: keep TabList next button visible for partial tabs (#21996)

adamalston · web-flow · commit 253316eb05e2 · 2026-04-23T11:12:39.000Z
* fix: keep TabList next button visible for partial tabs

* test: update avt test
diff --git a/e2e/components/Tabs/Tabs-test.avt.e2e.js b/e2e/components/Tabs/Tabs-test.avt.e2e.js
@@ -254,16 +254,13 @@ test.describe('@avt Tabs', () => {
       state: 'visible',
     });
 
-    // Right scroll button should disappear after manually scrolling horizontally to end of tabs
+    // Right scroll button should remain visible when the last tab is only
+    // partially visible.
     const tabList = page.locator('.cds--tab--list');
     const lastElement = page.getByText('Settings').nth(1);
     const nextButton = page.getByLabel('Scroll right');
     await tabList.hover();
     await lastElement.scrollIntoViewIfNeeded();
-    await page.waitForSelector('.cds--tab--overflow-nav-button--next', {
-      state: 'hidden',
-      timeout: 1000,
-    });
-    await expect(nextButton).toBeHidden();
+    await expect(nextButton).toBeVisible();
   });
 });
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
@@ -510,8 +510,7 @@ function TabList({
   //   AND SCROLL_LEFT + CLIENT_WIDTH < SCROLL_WIDTH
   const [isNextButtonVisible, setIsNextButtonVisible] = useState(
     ref.current
-      ? scrollLeft + buttonWidth + ref.current.clientWidth <
-          ref.current.scrollWidth
+      ? scrollLeft + ref.current.clientWidth < ref.current.scrollWidth
       : false
   );
 
@@ -632,8 +631,7 @@ function TabList({
     // adding 1 in calculation for firefox support
     setIsNextButtonVisible(
       ref.current
-        ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 <
-            ref.current.scrollWidth
+        ? scrollLeft + ref.current.clientWidth + 1 < ref.current.scrollWidth
         : false
     );
 
diff --git a/packages/react/src/components/Tabs/__tests__/Tabs-test.js b/packages/react/src/components/Tabs/__tests__/Tabs-test.js
@@ -607,7 +607,52 @@ describe('Tab', () => {
     expect(onTabCloseRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('should hide next overflow button when only 1px remains in the overflow threshold', async () => {
+  it('should keep next overflow button visible when the last tab is partially visible', () => {
+    jest.useFakeTimers();
+    const clientWidthSpy = jest
+      .spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+      .mockImplementation(function () {
+        return this.getAttribute?.('role') === 'tablist' ? 100 : 0;
+      });
+    const scrollWidthSpy = jest
+      .spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
+      .mockImplementation(function () {
+        return this.getAttribute?.('role') === 'tablist' ? 200 : 0;
+      });
+
+    try {
+      render(
+        <Tabs>
+          <TabList aria-label="List of tabs" />
+        </Tabs>
+      );
+
+      const tablist = screen.getByRole('tablist');
+      Object.defineProperty(tablist, 'scrollLeft', {
+        configurable: true,
+        writable: true,
+        value: 55,
+      });
+
+      fireEvent.scroll(tablist);
+      act(() => {
+        jest.advanceTimersByTime(250);
+      });
+
+      expect(screen.getByLabelText('Scroll right')).toHaveClass(
+        `${prefix}--tab--overflow-nav-button`,
+        `${prefix}--tab--overflow-nav-button--next`,
+        { exact: true }
+      );
+    } finally {
+      clientWidthSpy.mockRestore();
+      scrollWidthSpy.mockRestore();
+      jest.useRealTimers();
+    }
+  });
+
+  it('should hide next overflow button when only 1px remains in the overflow threshold', () => {
+    jest.useFakeTimers();
     const clientWidthSpy = jest
       .spyOn(HTMLElement.prototype, 'clientWidth', 'get')
       .mockImplementation(function () {
@@ -626,14 +671,28 @@ describe('Tab', () => {
         </Tabs>
       );
 
-      await waitFor(() => {
-        expect(screen.getByLabelText('Scroll right')).toHaveClass(
-          `${prefix}--tab--overflow-nav-button--hidden`
-        );
+      const tablist = screen.getByRole('tablist');
+      Object.defineProperty(tablist, 'scrollLeft', {
+        configurable: true,
+        writable: true,
+        value: 44,
+      });
+
+      fireEvent.scroll(tablist);
+      act(() => {
+        jest.advanceTimersByTime(250);
       });
+
+      expect(screen.getByLabelText('Scroll right')).toHaveClass(
+        `${prefix}--tab--overflow-nav-button`,
+        `${prefix}--tab--overflow-nav-button--next`,
+        `${prefix}--tab--overflow-nav-button--hidden`,
+        { exact: true }
+      );
     } finally {
       clientWidthSpy.mockRestore();
       scrollWidthSpy.mockRestore();
+      jest.useRealTimers();
     }
   });
 
