scroll to active tab

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -40,19 +40,6 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
   const scrollDirection = useScrollDirection();
   const [ activeTabIndex, setActiveTabIndex ] = useState<number>(tabs.length + 1);
 
-  useEffect(() => {
-    if (router.isReady) {
-      let tabIndex = 0;
-      if (router.query.tab) {
-        tabIndex = tabs.findIndex(({ id }) => id === router.query.tab);
-        if (tabIndex < 0) {
-          tabIndex = 0;
-        }
-      }
-      setActiveTabIndex(tabIndex);
-    }
-  }, [ tabs, router ]);
-
   const isMobile = useIsMobile();
   const { tabsCut, tabsList, tabsRefs, listRef, rightSlotRef } = useAdaptiveTabs(tabs, isMobile);
   const isSticky = useIsSticky(listRef, 5, stickyEnabled);
@@ -68,6 +55,38 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
     );
   }, [ tabs, router ]);
 
+  useEffect(() => {
+    if (router.isReady) {
+      let tabIndex = 0;
+      if (router.query.tab) {
+        tabIndex = tabs.findIndex(({ id }) => id === router.query.tab);
+        if (tabIndex < 0) {
+          tabIndex = 0;
+        }
+      }
+      setActiveTabIndex(tabIndex);
+    }
+  }, [ tabs, router, activeTabIndex ]);
+
+  useEffect(() => {
+    if (activeTabIndex < tabs.length && isMobile) {
+      window.setTimeout(() => {
+        const activeTabRef = tabsRefs[activeTabIndex];
+        if (activeTabRef.current && listRef.current) {
+          const activeTabRect = activeTabRef.current.getBoundingClientRect();
+
+          listRef.current.scrollTo({
+            left: activeTabRect.left + listRef.current.scrollLeft - 16,
+            behavior: 'smooth',
+          });
+        }
+      // have to wait until DOM is updated and all styles to tabs is applied
+      }, 300);
+    }
+  // run only when tab index or device type is updated
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ activeTabIndex, isMobile ]);
+
   return (
     <Tabs
       variant="soft-rounded"

ui/shared/RoutedTabs/useAdaptiveTabs.tsx

@@ -51,19 +51,20 @@ export default function useAdaptiveTabs(tabs: Array<RoutedTab>, disabled?: boole
   }, [ tabs, disabled ]);
 
   React.useEffect(() => {
-    setTabsRefs(disabled ? [] : tabsList.map((_, index) => tabsRefs[index] || React.createRef()));
+    setTabsRefs(tabsList.map((_, index) => tabsRefs[index] || React.createRef()));
+    setTabsCut(disabled ? tabs.length : 0);
   // update refs only when disabled prop changes
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ disabled ]);
 
   React.useEffect(() => {
-    if (tabsRefs.length > 0) {
+    if (tabsRefs.length > 0 && !disabled) {
       setTabsCut(calculateCut());
     }
-  }, [ calculateCut, tabsRefs ]);
+  }, [ calculateCut, disabled, tabsRefs ]);
 
   React.useEffect(() => {
-    if (tabsRefs.length === 0) {
+    if (tabsRefs.length === 0 || disabled) {
       return;
     }
 
@@ -76,7 +77,7 @@ export default function useAdaptiveTabs(tabs: Array<RoutedTab>, disabled?: boole
     return function cleanup() {
       resizeObserver.unobserve(document.body);
     };
-  }, [ calculateCut, tabsRefs.length ]);
+  }, [ calculateCut, disabled, tabsRefs.length ]);
 
   return React.useMemo(() => {
     return {