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

Author: afc163

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

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}
       />

package.json

@@ -34,7 +34,8 @@
     "now-build": "npm run build",
     "prepublishOnly": "npm run lint && npm run test && npm run compile && rc-np",
     "start": "dumi dev",
-    "test": "rc-test"
+    "test": "rc-test",
+    "prepare": "husky && dumi setup"
   },
   "dependencies": {
     "@rc-component/resize-observer": "^1.0.0",
@@ -58,7 +59,6 @@
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^4.0.1",
-    "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
     "dumi": "^2.0.0",
     "eslint": "^8.54.0",
@@ -68,9 +68,12 @@
     "father": "^4.0.0",
     "gh-pages": "^6.1.0",
     "history": "^5.3.0",
+    "husky": "^9.1.7",
     "immutability-helper": "^3.0.1",
     "less": "^4.1.3",
+    "lint-staged": "^15.5.0",
     "preact-compat": "^3.16.0",
+    "prettier": "^3.5.3",
     "rc-test": "^7.0.14",
     "react": "^18.0.0",
     "react-dnd": "^10.0.0",
@@ -84,6 +87,9 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
+  },
   "engines": {
     "node": ">=8.x"
   }

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 () => {