fix(tabs): call debounce function to update scrollLeft (#19196)

* fix(tabs): call debounce function to update scrollLeft

* test(tabs): add playwright test for horizontal manual scroll

Author: warrenmblood

e2e/components/Tabs/Tabs-test.avt.e2e.js

@@ -235,4 +235,35 @@ test.describe('@avt Tabs', () => {
     await page.keyboard.press('Delete');
     await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeHidden();
   });
+
+  test('@avt-keyboard-nav - horizontal manual scroll', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Set viewport size so scroll buttons appear
+    await page.setViewportSize({
+      width: 200,
+      height: 480,
+    });
+    await page.waitForSelector('.cds--tab--overflow-nav-button--next', {
+      state: 'visible',
+    });
+
+    // Right scroll button should disappear after manually scrolling horizontally to end of tabs
+    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();
+  });
 });

packages/react/src/components/Tabs/Tabs.tsx

@@ -529,9 +529,12 @@ function TabList({
 
   const tabs = useRef<TabElement[]>([]);
   const debouncedOnScroll = useCallback(() => {
-    return debounce((event) => {
-      setScrollLeft(event.target.scrollLeft);
+    const updateScroll = debounce(() => {
+      if (ref.current) {
+        setScrollLeft(ref.current.scrollLeft);
+      }
     }, scrollDebounceWait);
+    updateScroll();
   }, [scrollDebounceWait]);
 
   function onKeyDown(event: KeyboardEvent) {