diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index 7eac12650..8a622bb25 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -134,10 +134,14 @@ const Selector: React.ForwardRefRenderFunction // ====================== Input ====================== const [getInputMouseDown, setInputMouseDown] = useLock(0); - const onInternalInputKeyDown: React.KeyboardEventHandler = (event) => { + const onInternalInputKeyDown: React.KeyboardEventHandler< + HTMLInputElement | HTMLTextAreaElement + > = (event) => { const { which } = event; - if (which === KeyCode.UP || which === KeyCode.DOWN) { + // Compatible with multiple lines in TextArea + const isTextAreaElement = inputRef.current instanceof HTMLTextAreaElement; + if (!isTextAreaElement && open && (which === KeyCode.UP || which === KeyCode.DOWN)) { event.preventDefault(); } @@ -150,7 +154,14 @@ const Selector: React.ForwardRefRenderFunction // So when enter is pressed, the tag's input value should be emitted here to let selector know onSearchSubmit?.((event.target as HTMLInputElement).value); } - + // Move within the text box + if ( + isTextAreaElement && + !open && + ~[KeyCode.UP, KeyCode.DOWN, KeyCode.LEFT, KeyCode.RIGHT].indexOf(which) + ) { + return; + } if (isValidateOpenKey(which)) { onToggleOpen(true); } diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 540624901..a37330ddd 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -975,6 +975,112 @@ describe('Select.Basic', () => { expect(container.querySelector('input').getAttribute('type')).toEqual('email'); }); + + it('move the cursor in the textarea', () => { + const onKeyDown = jest.fn(); + const onChange = jest.fn(); + const onMouseDown = jest.fn(); + const onCompositionStart = jest.fn(); + const onCompositionEnd = jest.fn(); + const textareaRef = jest.fn(); + const mouseDownPreventDefault = jest.fn(); + const { container } = render( +