From cbfb69dd1530319a8a5ad9807778015e38f3c228 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 21 May 2024 13:37:16 -0700
Subject: [PATCH] =?UTF-8?q?[=F0=9F=90=B4]=20Support=20Japanese=20(et=20al.?=
 =?UTF-8?q?)=20IME=20in=20message=20input=20on=20web=20(#4159)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* support japanese et al. IME

* update comment

* nit
---
 .../Messages/Conversation/MessageInput.web.tsx        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
index dd7c4f6852..3e78608a70 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}
         />