Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/BaseSelect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -459,6 +459,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
React.useEffect(() => {
// After onBlur is triggered, the focused does not need to be reset
if (disabled) {
// A disabled input may not emit the keyup/blur event that releases this lock.
// Clear it here so a later interaction cannot inherit a stale Enter state.
keyLockRef.current = false;
triggerOpen(false);
setFocused(false);
}
Expand Down
54 changes: 54 additions & 0 deletions tests/Select.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2773,6 +2773,60 @@ describe('Select.Basic', () => {
expect(inputElem.value).toEqual('bb');
});

it('should clear the Enter key lock when disabled interrupts keyup', async () => {
const onChange = jest.fn();
let enableSelect: () => void;
const options = [
{ value: 1, label: 'Gianfranco Pistoni' },
{ value: 2, label: 'Gianni Brugola' },
{ value: 3, label: 'Edoardo Bulloni' },
];

const Demo: React.FC = () => {
const [value, setValue] = React.useState<number | null>(null);
const [disabled, setDisabled] = React.useState(false);
enableSelect = () => setDisabled(false);

return (
<Select
showSearch
value={value}
disabled={disabled}
optionFilterProp="label"
onChange={(nextValue) => {
onChange(nextValue);
setValue(nextValue);
setDisabled(true);
}}
options={options}
/>
);
};

const { container } = render(<Demo />);
const input = container.querySelector('input')!;
const searchAndPressEnter = async (searchValue: string) => {
fireEvent.change(input, { target: { value: searchValue } });
await waitFakeTimer(0, 1);
// The selection disables the input before the browser can emit keyup.
keyDown(input, KeyCode.ENTER);
};

toggleOpen(container);
selectItem(container, 2);
act(() => enableSelect());

toggleOpen(container);
await searchAndPressEnter('Brugola');
expect(input).toBeDisabled();
act(() => enableSelect());

toggleOpen(container);
await searchAndPressEnter('Pistoni');

expect(onChange.mock.calls.map(([value]) => value)).toEqual([3, 2, 1]);
});

it('support classnames and styles for select', () => {
const customClassNames = {
prefix: 'custom-prefix',
Expand Down