diff --git a/packages/tds-ui/src/components/tabs/tab-base.tsx b/packages/tds-ui/src/components/tabs/tab-base.tsx index de5e5e5b68..4c87a3aeac 100644 --- a/packages/tds-ui/src/components/tabs/tab-base.tsx +++ b/packages/tds-ui/src/components/tabs/tab-base.tsx @@ -35,11 +35,10 @@ function TabBaseComponent( const handleClick: MouseEventHandler = () => { onClick() - tabs.onChange?.(value) } 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 index a22294b8d7..38b26a9feb 100644 --- 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: Value variant: TabVariant scroll: boolean - onChange?: (value: Value) => void + handleFocusChanged: (value: Value) => void } export const TabsContext = createContext | undefined>( diff --git a/packages/tds-ui/src/components/tabs/tabs.tsx b/packages/tds-ui/src/components/tabs/tabs.tsx index b2108af317..5c39707c4f 100644 --- 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 = ({ TabsContextValue | undefined > + function handleFocusChanged(newValue: Value) { + if (value !== newValue) { + onChange?.(newValue) + } + } + return ( - + {children} )