Skip to content

Commit 6449ac5

Browse files
committed
fix: clear enter lock when select is disabled
1 parent 29e9dda commit 6449ac5

2 files changed

Lines changed: 57 additions & 0 deletions

File tree

src/BaseSelect/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
459459
React.useEffect(() => {
460460
// After onBlur is triggered, the focused does not need to be reset
461461
if (disabled) {
462+
// A disabled input may not emit the keyup/blur event that releases this lock.
463+
// Clear it here so a later interaction cannot inherit a stale Enter state.
464+
keyLockRef.current = false;
462465
triggerOpen(false);
463466
setFocused(false);
464467
}

tests/Select.test.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2773,6 +2773,60 @@ describe('Select.Basic', () => {
27732773
expect(inputElem.value).toEqual('bb');
27742774
});
27752775

2776+
it('should clear the Enter key lock when disabled interrupts keyup', async () => {
2777+
const onChange = jest.fn();
2778+
let enableSelect: () => void;
2779+
const options = [
2780+
{ value: 1, label: 'Gianfranco Pistoni' },
2781+
{ value: 2, label: 'Gianni Brugola' },
2782+
{ value: 3, label: 'Edoardo Bulloni' },
2783+
];
2784+
2785+
const Demo: React.FC = () => {
2786+
const [value, setValue] = React.useState<number | null>(null);
2787+
const [disabled, setDisabled] = React.useState(false);
2788+
enableSelect = () => setDisabled(false);
2789+
2790+
return (
2791+
<Select
2792+
showSearch
2793+
value={value}
2794+
disabled={disabled}
2795+
optionFilterProp="label"
2796+
onChange={(nextValue) => {
2797+
onChange(nextValue);
2798+
setValue(nextValue);
2799+
setDisabled(true);
2800+
}}
2801+
options={options}
2802+
/>
2803+
);
2804+
};
2805+
2806+
const { container } = render(<Demo />);
2807+
const input = container.querySelector('input')!;
2808+
const searchAndPressEnter = async (searchValue: string) => {
2809+
fireEvent.change(input, { target: { value: searchValue } });
2810+
await waitFakeTimer(0, 1);
2811+
// The selection disables the input before the browser can emit keyup.
2812+
keyDown(input, KeyCode.ENTER);
2813+
};
2814+
2815+
toggleOpen(container);
2816+
selectItem(container, 2);
2817+
act(() => enableSelect());
2818+
2819+
toggleOpen(container);
2820+
await searchAndPressEnter('Brugola');
2821+
expect(input).toBeDisabled();
2822+
act(() => enableSelect());
2823+
2824+
toggleOpen(container);
2825+
await searchAndPressEnter('Pistoni');
2826+
2827+
expect(onChange.mock.calls.map(([value]) => value)).toEqual([3, 2, 1]);
2828+
});
2829+
27762830
it('support classnames and styles for select', () => {
27772831
const customClassNames = {
27782832
prefix: 'custom-prefix',

0 commit comments

Comments
 (0)