Fix: Prevent message sending during IME composition and block new submissions while waiting for a response (#5331)

### What problem does this PR solve?

This pull request addresses an issue where the "Enter" key would send
the message prematurely while using Input Method Editor (IME) for text
composition. This problem occurs when users are typing with a non-Latin
input method, such as Chinese(Zhuyin), and press "Enter" to confirm
their selection, which unintentionally triggers message submission. Also
fixed the issue of blocking new submissions while waiting for a response

Before:


https://github.com/user-attachments/assets/233f3ac9-4b4b-4424-b4ab-ea2e31bb0663

After:


https://github.com/user-attachments/assets/f1c01af6-d1d7-4a79-9e81-5bdf3c0b3529

Block new submissions while waiting for a response:



https://github.com/user-attachments/assets/10a45b5f-44b9-4e36-9342-b1bbb4096312


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
James Chiang 2025-02-25 18:49:08 +08:00 committed by GitHub
parent f789463982
commit 150ab9c6a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -156,8 +156,14 @@ const MessageInput = ({
setFileList([]);
}, [fileList, onPressEnter, isUploadingFile]);
const [isComposing, setIsComposing] = useState(false);
const handleCompositionStart = () => setIsComposing(true);
const handleCompositionEnd = () => setIsComposing(false);
const handleInputKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
if (e.key === 'Enter' && !e.nativeEvent.shiftKey) {
if (isComposing || sendLoading) return;
e.preventDefault();
handlePressEnter();
}
@ -221,6 +227,8 @@ const MessageInput = ({
})}
onKeyDown={handleInputKeyDown}
onChange={onInputChange}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
autoSize={{ minRows: 1, maxRows: 6 }}
/>
<Space>