diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 278921c595..5a37678f76 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -62,6 +62,10 @@ background-color: SelectedItem; } } + + * { + pointer-events: none; + } } .ams-tabs__button-label, diff --git a/packages/react/src/Tabs/TabsButton.tsx b/packages/react/src/Tabs/TabsButton.tsx index d73f15c3ef..384db944c2 100644 --- a/packages/react/src/Tabs/TabsButton.tsx +++ b/packages/react/src/Tabs/TabsButton.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx' import { forwardRef, startTransition, useContext } from 'react' -import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react' +import type { ButtonHTMLAttributes, ForwardedRef, MouseEvent, PropsWithChildren } from 'react' import { TabsContext } from './TabsContext' export type TabsButtonProps = { @@ -14,9 +14,16 @@ export type TabsButtonProps = { } & PropsWithChildren> export const TabsButton = forwardRef( - ({ children, className, tab = 0, ...restProps }: TabsButtonProps, ref: ForwardedRef) => { + ({ children, className, onClick, tab = 0, ...restProps }: TabsButtonProps, ref: ForwardedRef) => { const { activeTab, tabsId, updateTab } = useContext(TabsContext) + const handleClick = (event: MouseEvent) => { + onClick?.(event) + startTransition(() => { + updateTab(tab) + }) + } + return (