Skip to content

Commit

Permalink
fix: tab to select an active option (#1078)
Browse files Browse the repository at this point in the history
  • Loading branch information
nathanlao authored Nov 7, 2024
1 parent ca86130 commit 33a598f
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/OptionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,8 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
break;
}

// >>> Select
// >>> Select (Tab / Enter)
case KeyCode.TAB:
case KeyCode.ENTER: {
// value
const item = memoFlattenOptions[activeIndex];
Expand Down
40 changes: 40 additions & 0 deletions tests/OptionList.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,46 @@ describe('OptionList', () => {
expect(onSelect).toHaveBeenCalledWith('1', expect.objectContaining({ selected: true }));
});

it('should tab key select an active option', () => {
const onActiveValue = jest.fn();
const onSelect = jest.fn();
const toggleOpen = jest.fn();
const listRef = React.createRef<RefOptionListProps>();

render(
generateList({
options: [{ value: '1' }, { value: '2' }],
onActiveValue,
onSelect,
toggleOpen,
ref: listRef,
}),
);

act(() => {
toggleOpen(true);
});

act(() => {
listRef.current.onKeyDown({ which: KeyCode.DOWN } as any);
});

expect(onActiveValue).toHaveBeenCalledWith(
'2',
expect.anything(),
expect.objectContaining({ source: 'keyboard' }),
);

act(() => {
listRef.current.onKeyDown({ which: KeyCode.TAB } as any);
});

expect(onSelect).toHaveBeenCalledTimes(1);
expect(onSelect).toHaveBeenCalledWith('2', expect.objectContaining({ selected: true }));

expect(toggleOpen).toHaveBeenCalledWith(false);
});

// mocked how we detect running platform in test environment
it('special key operation on Mac', () => {
const onActiveValue = jest.fn();
Expand Down

0 comments on commit 33a598f

Please sign in to comment.