fix: Tabs press Enter/Space on active tab should not trigger onChange

Author: afc163

docs/examples/basic.tsx

@@ -38,14 +38,19 @@ export default () => {
   }
 
   const onTabClick = (key: string) => {
-    console.log('key', key);
+    console.log('onTabClick', key);
+  };
+
+  const onChange = (key: string) => {
+    console.log('onChange', key);
   };
 
   return (
     <React.StrictMode>
       <Tabs
         tabBarExtraContent="extra"
         onTabClick={onTabClick}
+        onChange={onChange}
         direction={direction}
         items={items}
       />

src/TabNavList/index.tsx

@@ -375,8 +375,9 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
       // Enter & Space
       case 'Enter':
       case 'Space': {
+        console.log('press', code);
         e.preventDefault();
-        onTabClick(focusKey, e);
+        onTabClick(activeKey, e);
         break;
       }
       // Backspace

tests/accessibility.test.tsx

@@ -91,23 +91,26 @@ describe('Tabs.Accessibility', () => {
 
   it('should activate tab on Enter/Space', async () => {
     const onTabClick = jest.fn();
+    const onChange = jest.fn();
     const user = userEvent.setup();
 
-    render(createTabs({ onTabClick }));
+    render(createTabs({ onTabClick, onChange }));
 
     // jump to first tab
     await user.tab();
 
     // activate tab
     await user.keyboard(' ');
     expect(onTabClick).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
 
     // move focus to second tab
     await user.keyboard('{ArrowRight}');
 
     // activate tab
     await user.keyboard('{Enter}');
     expect(onTabClick).toHaveBeenCalledTimes(2);
+    expect(onChange).not.toHaveBeenCalled();
   });
 
   it('should not navigate to disabled tabs', async () => {