From 5b4168ac5bb790d1c1e02a5711a344a317619819 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Thu, 29 Aug 2024 22:47:19 +0530
Subject: [PATCH] feat: scroll tab in view on active

affects: @medly-components/core
---
 packages/core/src/components/Tabs/Tab/Tab.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/Tabs/Tab/Tab.tsx b/packages/core/src/components/Tabs/Tab/Tab.tsx
index 86ba67197..0fb62bd9e 100644
--- a/packages/core/src/components/Tabs/Tab/Tab.tsx
+++ b/packages/core/src/components/Tabs/Tab/Tab.tsx
@@ -1,13 +1,19 @@
 import { WithStyle } from '@medly-components/utils';
-import { memo, useContext } from 'react';
+import type { FC } from 'react';
+import { memo, useContext, useEffect, useRef } from 'react';
 import { TabsContext } from '../Tabs.context';
 import * as Styled from './Tab.styled';
 import { TabProps } from './types';
-import type { FC } from 'react';
 
 const Component: FC<TabProps> = memo(props => {
+    const ref = useRef<HTMLButtonElement>(null);
     const { id, active, label, icon: Icon = null, helperText, count, disabled, disabledLabel, ...restProps } = props,
         { tabSize, tabBackground, variant } = useContext(TabsContext);
+
+    useEffect(() => {
+        active && ref.current && ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }, [active]);
+
     return (
         <Styled.TabWrapper
             {...{ id, active, tabSize, disabled, variant, tabBackground, ...restProps }}
@@ -16,6 +22,7 @@ const Component: FC<TabProps> = memo(props => {
             aria-selected={active ? 'true' : 'false'}
             aria-controls={`panel-${id}`}
             tabIndex={active ? 0 : -1}
+            ref={ref}
         >
             {Icon && <Icon variant={tabSize === 'S' ? 'flat' : 'solid'} />}
             <Styled.LabelAndDetailsWrapper>