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;
}