diff --git a/components/input/OTP/OTPInput.tsx b/components/input/OTP/OTPInput.tsx index 592c99fd0e..e7a5a4e249 100644 --- a/components/input/OTP/OTPInput.tsx +++ b/components/input/OTP/OTPInput.tsx @@ -37,11 +37,15 @@ const OTPInput = React.forwardRef((props, ref) => { }; // ======================== Keyboard ======================== - const onInternalKeyDown: React.KeyboardEventHandler = ({ key }) => { + const onInternalKeyDown: React.KeyboardEventHandler = (event) => { + const { key, ctrlKey, metaKey } = event; + if (key === 'ArrowLeft') { onActiveChange(index - 1); } else if (key === 'ArrowRight') { onActiveChange(index + 1); + } else if (key === 'z' && (ctrlKey || metaKey)) { + event.preventDefault(); } syncSelection(); diff --git a/components/input/__tests__/otp.test.tsx b/components/input/__tests__/otp.test.tsx index 5d0707728d..877493166d 100644 --- a/components/input/__tests__/otp.test.tsx +++ b/components/input/__tests__/otp.test.tsx @@ -4,7 +4,7 @@ import Input from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; +import { createEvent, fireEvent, render, waitFakeTimer } from '../../../tests/utils'; const { OTP } = Input; @@ -191,4 +191,13 @@ describe('Input.OTP', () => { fireEvent.input(inputs[3], { target: { value: '4' } }); expect(onInput).toHaveBeenCalledWith(['1', '2', '3', '4']); }); + + it('disabled ctrl + z', () => { + const { container } = render(); + const inputEle = container.querySelector('input')!; + const event = createEvent.keyDown(inputEle, { key: 'z', ctrlKey: true }); + fireEvent(inputEle, event); + + expect(event.defaultPrevented).toBeTruthy(); + }); });