fix(TabList): respect event default prevention (#2463)

Author: amje

src/components/tabs/Tab.tsx

@@ -6,20 +6,11 @@ import {Label} from '../Label';
 
 import {bTab} from './constants';
 import {useTab} from './hooks/useTab';
-import type {TabComponentElementType, TabComponentProps, TabLinkProps, TabProps} from './types';
+import type {TabComponentElementType, TabProps} from './types';
+import {isTabComponentProps, isTabLinkProps} from './utils';
 
 import './Tab.scss';
 
-function isTabComponentProps<T extends TabComponentElementType>(
-    p: TabProps<T>,
-): p is TabComponentProps<Exclude<T, undefined>> {
-    return p.component !== undefined;
-}
-
-function isTabLinkProps<T extends TabComponentElementType>(p: TabProps<T>): p is TabLinkProps {
-    return p.href !== undefined;
-}
-
 export const Tab = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, TabProps>(function Tab<
     T extends TabComponentElementType,
 >(

src/components/tabs/__tests__/TabList.test.tsx

@@ -108,6 +108,31 @@ test('should call onUpdate on tab click', async () => {
     expect(onUpdateFn).toHaveBeenCalledWith(tab1.value);
 });
 
+test('should not call onUpdate if default prevented', async () => {
+    const onUpdateFn = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+        <TabList onUpdate={onUpdateFn}>
+            <Tab value={tab1.value} qa={tab1.qa} onClick={(e) => e.preventDefault()}>
+                {tab1.title}
+            </Tab>
+            <Tab value={tab2.value} qa={tab2.qa}>
+                {tab2.title}
+            </Tab>
+        </TabList>,
+    );
+
+    const tabComponent1 = screen.getByTestId(tab1.qa);
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+
+    await user.click(tabComponent1);
+    await user.click(tabComponent2);
+
+    expect(onUpdateFn).toBeCalledTimes(1);
+    expect(onUpdateFn).toHaveBeenCalledWith(tab2.value);
+});
+
 test('should wrap tabs', () => {
     const wrapQaId = 'wrap';
 

src/components/tabs/hooks/useTab.ts

@@ -23,16 +23,33 @@ export function useTab<T extends TabComponentElementType>(
     const isFocused = tabContext.isFocused;
 
     const onClick = (event: React.MouseEvent) => {
-        if (!tabProps.disabled) {
+        if (tabProps.disabled) {
+            return;
+        }
+
+        if (tabProps.onClick) {
+            tabProps.onClick(event);
+        }
+
+        if (!event.defaultPrevented) {
             tabContext.onUpdate?.(tabProps.value);
-            tabProps.onClick?.(event);
         }
     };
 
     const onKeyDown = (event: React.KeyboardEvent) => {
-        if ((event.key === KeyCode.SPACEBAR || event.key === KeyCode.ENTER) && !tabProps.disabled) {
+        if (tabProps.disabled) {
+            return;
+        }
+
+        if (tabProps.onKeyDown) {
+            tabProps.onKeyDown(event);
+        }
+
+        if (
+            !event.defaultPrevented &&
+            (event.key === KeyCode.SPACEBAR || event.key === KeyCode.ENTER)
+        ) {
             tabContext.onUpdate?.(tabProps.value);
-            tabProps.onKeyDown?.(event);
         }
     };
 

src/components/tabs/utils.ts

@@ -0,0 +1,13 @@
+import type {TabComponentElementType, TabComponentProps, TabLinkProps, TabProps} from './types';
+
+export function isTabComponentProps<T extends TabComponentElementType>(
+    p: TabProps<T>,
+): p is TabComponentProps<Exclude<T, undefined>> {
+    return p.component !== undefined;
+}
+
+export function isTabLinkProps<T extends TabComponentElementType>(
+    p: TabProps<T>,
+): p is TabLinkProps {
+    return p.href !== undefined;
+}