From dbda7c739613246a77d2525f3aa1a17345b6717d Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Thu, 6 Jun 2024 11:21:37 -0700
Subject: [PATCH] fix(tablistvertical): add scrollintoview

---
 packages/react/src/components/Tabs/Tabs.tsx | 26 +++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 0af4b080eb61..4a4b662d3421 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -737,6 +737,12 @@ export interface TabListVerticalProps extends DivAttributes {
    * Specify an optional className to be added to the container node
    */
   className?: string;
+
+  /**
+   * Choose whether to automatically scroll to newly selected tabs
+   * on component rerender
+   */
+  scrollIntoView?: boolean;
 }
 // type TabElement = HTMLElement & { disabled?: boolean };
 
@@ -745,6 +751,7 @@ function TabListVertical({
   'aria-label': label,
   children,
   className: customClassName,
+  scrollIntoView,
   ...rest
 }: TabListVerticalProps) {
   const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex } =
@@ -804,6 +811,25 @@ function TabListVertical({
     }
   });
 
+  useEffect(() => {
+    function handler() {
+      const tab = tabs.current[selectedIndex];
+      if (scrollIntoView && tab) {
+        tab.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
+    }
+    window.addEventListener('resize', handler);
+
+    handler();
+
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, [selectedIndex, scrollIntoView]);
+
   useEffect(() => {
     const element = ref.current;
     if (!element) {