[🐴] Support Japanese (et al.) IME in message input on web (#4159)

* support japanese et al. IME

* update comment

* nit

1 files changed, 10 insertions, 1 deletions

diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
index dd7c4f685..3e78608a7 100644
--- a/src/screens/Messages/Conversation/MessageInput.web.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.web.tsx
@@ -26,6 +26,7 @@ export function MessageInput({
   const [message, setMessage] = React.useState(getDraft)
 
   const inputStyles = useSharedInputStyles()
+  const isComposing = React.useRef(false)
   const [isFocused, setIsFocused] = React.useState(false)
   const [isHovered, setIsHovered] = React.useState(false)
 
@@ -44,13 +45,15 @@ export function MessageInput({
 
   const onKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Don't submit the form when the Japanese or any other IME is composing
+      if (isComposing.current) return
       if (e.key === 'Enter') {
         if (e.shiftKey) return
         e.preventDefault()
         onSubmit()
       }
     },
-    [onSubmit],
+    [onSubmit, isComposing],
   )
 
   const onChange = React.useCallback(
@@ -102,6 +105,12 @@ export function MessageInput({
           autoFocus={true}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
+          onCompositionStart={() => {
+            isComposing.current = true
+          }}
+          onCompositionEnd={() => {
+            isComposing.current = false
+          }}
           onChange={onChange}
           onKeyDown={onKeyDown}
         />