Skip to content

Commit c08b866

Browse files
authored
fix: Tabs press Enter/Space on active tab should not trigger onChange (#790)
* fix: Tabs press Enter/Space on active tab should not trigger onChange * fix * fix lint * remove unused devdeps
1 parent 629f13b commit c08b866

File tree

5 files changed

+23
-11
lines changed

5 files changed

+23
-11
lines changed

.husky/pre-commit

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
npx lint-staged

docs/examples/basic.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,19 @@ export default () => {
3838
}
3939

4040
const onTabClick = (key: string) => {
41-
console.log('key', key);
41+
console.log('onTabClick', key);
42+
};
43+
44+
const onChange = (key: string) => {
45+
console.log('onChange', key);
4246
};
4347

4448
return (
4549
<React.StrictMode>
4650
<Tabs
4751
tabBarExtraContent="extra"
4852
onTabClick={onTabClick}
53+
onChange={onChange}
4954
direction={direction}
5055
items={items}
5156
/>

package.json

+10-8
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
"now-build": "npm run build",
3535
"prepublishOnly": "npm run lint && npm run test && npm run compile && rc-np",
3636
"start": "dumi dev",
37-
"test": "rc-test"
37+
"test": "rc-test",
38+
"prepare": "husky && dumi setup"
3839
},
3940
"dependencies": {
4041
"@rc-component/resize-observer": "^1.0.0",
@@ -45,6 +46,8 @@
4546
"@rc-component/menu": "~1.0.0"
4647
},
4748
"devDependencies": {
49+
"@typescript-eslint/eslint-plugin": "^5.59.7",
50+
"@typescript-eslint/parser": "^5.59.7",
4851
"@rc-component/father-plugin": "^2.0.0",
4952
"@rc-component/np": "^1.0.3",
5053
"@rc-component/trigger": "^3.0.0",
@@ -54,36 +57,35 @@
5457
"@types/classnames": "^2.2.10",
5558
"@types/enzyme": "^3.10.5",
5659
"@types/jest": "^29.4.0",
57-
"@types/keyv": "4.2.0",
5860
"@types/react": "^18.2.42",
5961
"@types/react-dom": "^18.0.11",
6062
"@umijs/fabric": "^4.0.1",
61-
"coveralls": "^3.0.6",
6263
"cross-env": "^7.0.2",
6364
"dumi": "^2.0.0",
6465
"eslint": "^8.54.0",
6566
"eslint-plugin-jest": "^28.9.0",
6667
"eslint-plugin-unicorn": "^56.0.1",
67-
"fastclick": "~1.0.6",
6868
"father": "^4.0.0",
6969
"gh-pages": "^6.1.0",
70-
"history": "^5.3.0",
71-
"immutability-helper": "^3.0.1",
70+
"husky": "^9.1.7",
7271
"less": "^4.1.3",
73-
"preact-compat": "^3.16.0",
72+
"lint-staged": "^15.5.0",
73+
"prettier": "^3.5.3",
7474
"rc-test": "^7.0.14",
7575
"react": "^18.0.0",
7676
"react-dnd": "^10.0.0",
7777
"react-dnd-html5-backend": "^10.0.0",
7878
"react-dom": "^18.0.0",
7979
"react-sticky": "^6.0.3",
80-
"sortablejs": "^1.7.0",
8180
"typescript": "^5.3.2"
8281
},
8382
"peerDependencies": {
8483
"react": ">=16.9.0",
8584
"react-dom": ">=16.9.0"
8685
},
86+
"lint-staged": {
87+
"*": "prettier --write --ignore-unknown"
88+
},
8789
"engines": {
8890
"node": ">=8.x"
8991
}

src/TabNavList/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -375,8 +375,9 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
375375
// Enter & Space
376376
case 'Enter':
377377
case 'Space': {
378+
console.log('press', code);
378379
e.preventDefault();
379-
onTabClick(focusKey, e);
380+
onTabClick(activeKey, e);
380381
break;
381382
}
382383
// Backspace

tests/accessibility.test.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -91,23 +91,26 @@ describe('Tabs.Accessibility', () => {
9191

9292
it('should activate tab on Enter/Space', async () => {
9393
const onTabClick = jest.fn();
94+
const onChange = jest.fn();
9495
const user = userEvent.setup();
9596

96-
render(createTabs({ onTabClick }));
97+
render(createTabs({ onTabClick, onChange }));
9798

9899
// jump to first tab
99100
await user.tab();
100101

101102
// activate tab
102103
await user.keyboard(' ');
103104
expect(onTabClick).toHaveBeenCalledTimes(1);
105+
expect(onChange).not.toHaveBeenCalled();
104106

105107
// move focus to second tab
106108
await user.keyboard('{ArrowRight}');
107109

108110
// activate tab
109111
await user.keyboard('{Enter}');
110112
expect(onTabClick).toHaveBeenCalledTimes(2);
113+
expect(onChange).not.toHaveBeenCalled();
111114
});
112115

113116
it('should not navigate to disabled tabs', async () => {

0 commit comments

Comments
 (0)