fix(tabs): fix scroll behavior on desktop for tabs that were not visi…

…ble initially
Synthetixio · Jul 28, 2022 · 37e00ed · 37e00ed
1 parent c72eb5d
commit 37e00ed
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -8,7 +8,13 @@ export default {
   component: Tabs
 };
 
-const Template: Story<ComponentProps<typeof Tabs>> = (args) => <Tabs {...args} />;
+const Template: Story<ComponentProps<typeof Tabs>> = (args) => (
+  <div style={{ height: 1500, display: 'flex', flexDirection: 'column-reverse' }}>
+    <div>
+      <Tabs {...args} />
+    </div>
+  </div>
+);
 
 export const Basic = Template.bind({});
 Basic.args = {

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -46,14 +46,21 @@ export const Tabs: React.FC<TabsProps> = ({
   );
 
   useEffect(() => {
-    if (typeof document !== 'undefined') document.getElementById(String(initial))?.scrollIntoView();
+    if (typeof document !== 'undefined') {
+      const container = document.getElementById('ui-tabs-container');
+      if (container && container?.offsetWidth < container?.scrollWidth) {
+        const target = document.getElementById(String(initial));
+        container?.scroll({ behavior: 'smooth', left: target?.clientWidth, top: 0 });
+      }
+    }
   }, [initial]);
 
   return (
     <>
       <div
         {...props}
         className={clsx('ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto', className)}
+        id='ui-tabs-container'
       >
         {items.map((item) => (
           <Tab