Tabs 컴포넌트에서 onChange 로직을 처리하도록 변경

titicacadev · Jan 6, 2025 · 13d9a24 · 13d9a24
1 parent 017a295
commit 13d9a24
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/packages/tds-ui/src/components/tabs/tab-base.tsx b/packages/tds-ui/src/components/tabs/tab-base.tsx
@@ -38,7 +38,7 @@ function TabBaseComponent<Value extends number | string | symbol>(
   }
 
   const handleFocus: FocusEventHandler = () => {
-    tabs.onChange?.(value)
+    tabs.handleFocusChanged?.(value)
   }
 
   const handleKeyDown: KeyboardEventHandler = (event) => {

diff --git a/packages/tds-ui/src/components/tabs/tabs-context.tsx b/packages/tds-ui/src/components/tabs/tabs-context.tsx
@@ -7,7 +7,7 @@ export interface TabsContextValue<Value extends number | string | symbol> {
   value: Value
   variant: TabVariant
   scroll: boolean
-  onChange?: (value: Value) => void
+  handleFocusChanged: (value: Value) => void
 }
 
 export const TabsContext = createContext<TabsContextValue<string> | undefined>(

diff --git a/packages/tds-ui/src/components/tabs/tabs.tsx b/packages/tds-ui/src/components/tabs/tabs.tsx
@@ -35,8 +35,16 @@ export const Tabs = <Value extends number | string | symbol>({
     TabsContextValue<Value> | undefined
   >
 
+  function handleFocusChanged(newValue: Value) {
+    if (value !== newValue) {
+      onChange?.(newValue)
+    }
+  }
+
   return (
-    <TabsContextProvider value={{ id, value, variant, scroll, onChange }}>
+    <TabsContextProvider
+      value={{ id, value, variant, scroll, handleFocusChanged }}
+    >
       {children}
     </TabsContextProvider>
   )