Skip to content

Commit 278b7d7

Browse files
authored
fix: Tabs should activate tab when press enter/space on unactive tab (#825) (#826)
1 parent 61c33aa commit 278b7d7

File tree

3 files changed

+15
-6
lines changed

3 files changed

+15
-6
lines changed

docs/examples/basic.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,16 @@ export default () => {
4141
console.log('onTabClick', key);
4242
};
4343

44-
const onChange = (key: string) => {
45-
console.log('onChange', key);
44+
const onTabChange = (key: string) => {
45+
console.log('onTabChange', key);
4646
};
4747

4848
return (
4949
<React.StrictMode>
5050
<Tabs
5151
tabBarExtraContent="extra"
5252
onTabClick={onTabClick}
53-
onChange={onChange}
53+
onChange={onTabChange}
5454
direction={direction}
5555
items={items}
5656
/>

src/TabNavList/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
375375
case 'Enter':
376376
case 'Space': {
377377
e.preventDefault();
378-
onTabClick(activeKey, e);
378+
onTabClick(focusKey ?? activeKey, e);
379379
break;
380380
}
381381
// Backspace

tests/accessibility.test.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,24 @@ describe('Tabs.Accessibility', () => {
102102
// activate tab
103103
await user.keyboard(' ');
104104
expect(onTabClick).toHaveBeenCalledTimes(1);
105-
expect(onChange).not.toHaveBeenCalled();
105+
expect(onTabClick).toHaveBeenLastCalledWith('1', expect.any(Object));
106+
expect(onChange).toHaveBeenCalledTimes(0);
106107

107108
// move focus to second tab
108109
await user.keyboard('{ArrowRight}');
109110

110111
// activate tab
111112
await user.keyboard('{Enter}');
112113
expect(onTabClick).toHaveBeenCalledTimes(2);
113-
expect(onChange).not.toHaveBeenCalled();
114+
expect(onTabClick).toHaveBeenLastCalledWith('2', expect.any(Object));
115+
expect(onChange).toHaveBeenCalledTimes(1);
116+
expect(onChange).toHaveBeenLastCalledWith('2');
117+
118+
// press enter on same tab
119+
await user.keyboard('{Enter}');
120+
expect(onTabClick).toHaveBeenCalledTimes(3);
121+
expect(onTabClick).toHaveBeenLastCalledWith('2', expect.any(Object));
122+
expect(onChange).toHaveBeenCalledTimes(1);
114123
});
115124

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

0 commit comments

Comments
 (0)