diff --git a/packages/x/components/sender/__tests__/index.test.tsx b/packages/x/components/sender/__tests__/index.test.tsx index aca381d0df..e23d4cf1a6 100644 --- a/packages/x/components/sender/__tests__/index.test.tsx +++ b/packages/x/components/sender/__tests__/index.test.tsx @@ -177,6 +177,26 @@ describe('Sender Component', () => { }); expect(onSubmit).toHaveBeenCalledWith('bamboo', [], undefined); }); + + it('should not submit when Enter is pressed within 100ms after composition end', () => { + const onSubmit = jest.fn(); + const { container } = render(); + const textarea = container.querySelector('textarea')!; + + act(() => { + fireEvent.compositionStart(textarea); + }); + + act(() => { + fireEvent.compositionEnd(textarea); + }); + + act(() => { + fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false }); + }); + + expect(onSubmit).not.toHaveBeenCalled(); + }); }); it('Sender.Header not can be focus', () => { diff --git a/packages/x/components/sender/components/TextArea.tsx b/packages/x/components/sender/components/TextArea.tsx index c60dfb0406..e095af5098 100644 --- a/packages/x/components/sender/components/TextArea.tsx +++ b/packages/x/components/sender/components/TextArea.tsx @@ -101,6 +101,7 @@ const TextArea = React.forwardRef((_, ref) => { // ============================ Submit ============================ const isCompositionRef = React.useRef(false); + const lastCompositionEndTick = React.useRef(0); const onInternalCompositionStart = () => { isCompositionRef.current = true; @@ -108,13 +109,22 @@ const TextArea = React.forwardRef((_, ref) => { const onInternalCompositionEnd = () => { isCompositionRef.current = false; + lastCompositionEndTick.current = Date.now(); }; const onInternalKeyDown: React.KeyboardEventHandler = (e) => { const eventRes = onKeyDown?.(e); const { key, shiftKey, ctrlKey, altKey, metaKey } = e; - - if (isCompositionRef.current || key !== 'Enter' || eventRes === false) { + const COMPOSITION_END_DEBOUNCE_MS = 100; + const isJustFinishedComposition = + Date.now() - lastCompositionEndTick.current < COMPOSITION_END_DEBOUNCE_MS; + + if ( + isCompositionRef.current || + isJustFinishedComposition || + key !== 'Enter' || + eventRes === false + ) { return; }