diff --git a/components/sender/index.tsx b/components/sender/index.tsx index 816c10a42..bbdf2c1fe 100644 --- a/components/sender/index.tsx +++ b/components/sender/index.tsx @@ -213,17 +213,44 @@ const ForwardSender = React.forwardRef((props, ref) => { // ============================ Submit ============================ const isCompositionRef = React.useRef(false); + const isCompositionEndRef = React.useRef(false); + const pendingKeyDownRef = React.useRef | null>(null); const onInternalCompositionStart = () => { isCompositionRef.current = true; }; const onInternalCompositionEnd = () => { - isCompositionRef.current = false; + if (isCompositionRef.current) { + isCompositionEndRef.current = true; + isCompositionRef.current = false; + } + // After processing the input Chinese, use CapsLock + if (pendingKeyDownRef.current?.key === 'CapsLock') { + isCompositionEndRef.current = false; + } }; const onInternalKeyPress: TextareaProps['onKeyPress'] = (e) => { - const canSubmit = e.key === 'Enter' && !isCompositionRef.current; + if (isCompositionRef.current || isCompositionEndRef.current) { + // Parameter isCompositionRef.current is the event execution: onInternalCompositionStart -> onInternalKeyPress -> onInternalCompositionEnd + // Parameter isCompositionEndRef.current is the event execution: onInternalCompositionStart -> onInternalCompositionEnd -> onInternalKeyPress + handleActualKeyPress(e, false); + isCompositionRef.current = false; + if (isCompositionEndRef.current) { + isCompositionEndRef.current = false; + pendingKeyDownRef.current = null; + } + } else { + handleActualKeyPress(e, true); + } + }; + + const handleActualKeyPress = ( + e: React.KeyboardEvent, + isCanSubmit: boolean, + ) => { + const canSubmit = e.key === 'Enter' && isCanSubmit; // Check for `submitType` to submit switch (submitType) { @@ -245,6 +272,16 @@ const ForwardSender = React.forwardRef((props, ref) => { onKeyPress?.(e); }; + const onInternalKeyDown: React.KeyboardEventHandler = (e) => { + if (e.key !== 'Unidentified') { + // Record e in the keydown event + pendingKeyDownRef.current = e; + } + if (onKeyDown) { + onKeyDown(e); + } + }; + // ============================ Paste ============================= const onInternalPaste: React.ClipboardEventHandler = (e) => { // Get files @@ -346,7 +383,7 @@ const ForwardSender = React.forwardRef((props, ref) => { onPressEnter={onInternalKeyPress} onCompositionStart={onInternalCompositionStart} onCompositionEnd={onInternalCompositionEnd} - onKeyDown={onKeyDown} + onKeyDown={onInternalKeyDown} onPaste={onInternalPaste} variant="borderless" readOnly={readOnly}