From 18524c1214b4a0d26f03814f2d3d2a38a182d820 Mon Sep 17 00:00:00 2001
From: Yuta Hinokuma <higumachan@users.noreply.github.com>
Date: Tue, 11 Feb 2025 04:48:02 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Fixed=20a=20problem=20with=20IME's(i.e.?=
 =?UTF-8?q?=20Japanese=20IME=20input)=20Enter=20to=20Co=E2=80=A6=20(#1165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/desktop/src/components/Input.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
index 24d00f7a8..f90b778ef 100644
--- a/ui/desktop/src/components/Input.tsx
+++ b/ui/desktop/src/components/Input.tsx
@@ -17,6 +17,8 @@ export default function Input({
   onStop,
 }: InputProps) {
   const [value, setValue] = useState('');
+  // State to track if the IME is composing (i.e., in the middle of Japanese IME input)
+  const [isComposing, setIsComposing] = useState(false);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -41,12 +43,22 @@ export default function Input({
   useAutosizeTextArea(textAreaRef.current, value);
 
   const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = evt.target?.value;
+    const val = evt.target.value;
     setValue(val);
   };
 
+  // Handlers for composition events, which are crucial for proper IME behavior
+  const handleCompositionStart = (evt: React.CompositionEvent<HTMLTextAreaElement>) => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = (evt: React.CompositionEvent<HTMLTextAreaElement>) => {
+    setIsComposing(false);
+  };
+
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (evt.key === 'Enter' && !evt.shiftKey) {
+    // Only trigger submit on Enter if not composing (IME input in progress) and shift is not pressed
+    if (evt.key === 'Enter' && !evt.shiftKey && !isComposing) {
       evt.preventDefault();
       if (value.trim()) {
         handleSubmit(new CustomEvent('submit', { detail: { value } }));
@@ -76,18 +88,14 @@ export default function Input({
       onSubmit={onFormSubmit}
       className="flex relative h-auto px-[16px] pr-[68px] py-[1rem] border-t border-borderSubtle"
     >
-      {/* loading */}
-      {/* {isLoading && (
-        <div className="absolute top-[-2px] left-0 w-full h-[2px]">
-          <div className="absolute w-[300px] h-[2px] bg-gradient-to-r from-blockTeal to-blockOrange animate-gradient-loader"></div>
-        </div>
-      )} */}
       <textarea
         autoFocus
         id="dynamic-textarea"
         placeholder="What can goose help with?"
         value={value}
         onChange={handleChange}
+        onCompositionStart={handleCompositionStart}
+        onCompositionEnd={handleCompositionEnd}
         onKeyDown={handleKeyDown}
         disabled={disabled}
         ref={textAreaRef}