Skip to content

Commit

Permalink
Fix: Prevent message sending during IME composition and block new sub…
Browse files Browse the repository at this point in the history
…missions 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)
  • Loading branch information
jabee0228 authored Feb 25, 2025
1 parent f789463 commit 150ab9c
Showing 1 changed file with 8 additions and 0 deletions.
8 changes: 8 additions & 0 deletions web/src/components/message-input/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down Expand Up @@ -221,6 +227,8 @@ const MessageInput = ({
})}
onKeyDown={handleInputKeyDown}
onChange={onInputChange}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
autoSize={{ minRows: 1, maxRows: 6 }}
/>
<Space>
Expand Down

0 comments on commit 150ab9c

Please sign in to comment.