fix(input): improve IME composition handling across input components

axin7 · 123vivekr · commit 9f03d77a979b · 2025-09-26T14:17:40.000+05:30
- Add IME composition state tracking to prevent premature submission during input composition
- Handle onCompositionStart/End events in text inputs and textareas
- Replace onKeyPress with onKeyDown to better handle IME interactions
- Add proper IME detection in FloatingPromptInput for enhanced input handling
- Fix issues with Enter key triggering actions during IME composition in:
  - AgentExecution task input
  - ClaudeCodeSession fork dialog
  - TimelineNavigator checkpoint creation
  - WebviewPreview URL input
  - FloatingPromptInput main textarea

This ensures proper input behavior for users of CJK input methods and other IME systems.
diff --git a/src/components/AgentExecution.tsx b/src/components/AgentExecution.tsx
@@ -107,6 +107,9 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   
   // Hooks configuration state
   const [isHooksDialogOpen, setIsHooksDialogOpen] = useState(false);
+
+  // IME composition state
+  const isIMEComposingRef = useRef(false);
   const [activeHooksTab, setActiveHooksTab] = useState("project");
 
   // Execution stats
@@ -413,62 +416,31 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
 
       // Call the API to kill the agent session
       const success = await api.killAgentSession(runId);
-      
+
       if (success) {
         console.log(`Successfully stopped agent session ${runId}`);
       } else {
         console.warn(`Failed to stop agent session ${runId} - it may have already finished`);
       }
-      
+
       // Update UI state
       setIsRunning(false);
       setExecutionStartTime(null);
-      // Update tab status to idle when stopped
-      if (tabId) {
-        updateTabStatus(tabId, 'idle');
-      }
-      
-      // Clean up listeners
-      unlistenRefs.current.forEach(unlisten => unlisten());
-      unlistenRefs.current = [];
-      
-      // Add a message indicating execution was stopped
-      setMessages(prev => [...prev, {
-        type: "result",
-        subtype: "error",
-        is_error: true,
-        result: "Execution stopped by user",
-        duration_ms: elapsedTime * 1000,
-        usage: {
-          input_tokens: totalTokens,
-          output_tokens: 0
-        }
-      }]);
     } catch (err) {
       console.error("Failed to stop agent:", err);
-      // Still update UI state even if the backend call failed
-      setIsRunning(false);
-      setExecutionStartTime(null);
-      // Update tab status to idle
-      if (tabId) {
-        updateTabStatus(tabId, 'idle');
-      }
-      
-      // Show error message
-      setMessages(prev => [...prev, {
-        type: "result",
-        subtype: "error",
-        is_error: true,
-        result: `Failed to stop execution: ${err instanceof Error ? err.message : 'Unknown error'}`,
-        duration_ms: elapsedTime * 1000,
-        usage: {
-          input_tokens: totalTokens,
-          output_tokens: 0
-        }
-      }]);
     }
   };
 
+  const handleCompositionStart = () => {
+    isIMEComposingRef.current = true;
+  };
+
+  const handleCompositionEnd = () => {
+    setTimeout(() => {
+      isIMEComposingRef.current = false;
+    }, 0);
+  };
+
   const handleBackWithConfirmation = () => {
     if (isRunning) {
       // Show confirmation dialog before navigating away during execution
@@ -707,11 +679,16 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                   placeholder="What would you like the agent to do?"
                   disabled={isRunning}
                   className="flex-1 h-9"
-                  onKeyPress={(e) => {
+                  onKeyDown={(e) => {
                     if (e.key === "Enter" && !isRunning && projectPath && task.trim()) {
+                      if (e.nativeEvent.isComposing || isIMEComposingRef.current) {
+                        return;
+                      }
                       handleExecute();
                     }
                   }}
+                  onCompositionStart={handleCompositionStart}
+                  onCompositionEnd={handleCompositionEnd}
                 />
                 <motion.div
                   whileTap={{ scale: 0.97 }}
diff --git a/src/components/ClaudeCodeSession.tsx b/src/components/ClaudeCodeSession.tsx
@@ -105,7 +105,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   
   // Add collapsed state for queued prompts
   const [queuedPromptsCollapsed, setQueuedPromptsCollapsed] = useState(false);
-  
+
   const parentRef = useRef<HTMLDivElement>(null);
   const unlistenRefs = useRef<UnlistenFn[]>([]);
   const hasActiveSessionRef = useRef(false);
@@ -114,6 +114,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const isMountedRef = useRef(true);
   const isListeningRef = useRef(false);
   const sessionStartTime = useRef<number>(Date.now());
+  const isIMEComposingRef = useRef(false);
   
   // Session metrics state for enhanced analytics
   const sessionMetrics = useRef({
@@ -1051,6 +1052,16 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     setShowForkDialog(true);
   };
 
+  const handleCompositionStart = () => {
+    isIMEComposingRef.current = true;
+  };
+
+  const handleCompositionEnd = () => {
+    setTimeout(() => {
+      isIMEComposingRef.current = false;
+    }, 0);
+  };
+
   const handleConfirmFork = async () => {
     if (!forkCheckpointId || !forkSessionName.trim() || !effectiveSession) return;
     
@@ -1639,11 +1650,16 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                 placeholder="e.g., Alternative approach"
                 value={forkSessionName}
                 onChange={(e) => setForkSessionName(e.target.value)}
-                onKeyPress={(e) => {
+                onKeyDown={(e) => {
                   if (e.key === "Enter" && !isLoading) {
+                    if (e.nativeEvent.isComposing || isIMEComposingRef.current) {
+                      return;
+                    }
                     handleConfirmFork();
                   }
                 }}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
               />
             </div>
           </div>
diff --git a/src/components/FloatingPromptInput.tsx b/src/components/FloatingPromptInput.tsx
@@ -230,6 +230,7 @@ const FloatingPromptInputInner = (
   const expandedTextareaRef = useRef<HTMLTextAreaElement>(null);
   const unlistenDragDropRef = useRef<(() => void) | null>(null);
   const [textareaHeight, setTextareaHeight] = useState<number>(48);
+  const isIMEComposingRef = useRef(false);
 
   // Expose a method to add images programmatically
   React.useImperativeHandle(
@@ -432,23 +433,6 @@ const FloatingPromptInputInner = (
     }
   }, [isExpanded]);
 
-  const handleSend = () => {
-    if (prompt.trim() && !disabled) {
-      let finalPrompt = prompt.trim();
-      
-      // Append thinking phrase if not auto mode
-      const thinkingMode = THINKING_MODES.find(m => m.id === selectedThinkingMode);
-      if (thinkingMode && thinkingMode.phrase) {
-        finalPrompt = `${finalPrompt}.\n\n${thinkingMode.phrase}.`;
-      }
-      
-      onSend(finalPrompt, selectedModel);
-      setPrompt("");
-      setEmbeddedImages([]);
-      setTextareaHeight(48); // Reset height after sending
-    }
-  };
-
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     const newCursorPosition = e.target.selectionStart || 0;
@@ -657,6 +641,66 @@ const FloatingPromptInputInner = (
     }, 0);
   };
 
+  const handleCompositionStart = () => {
+    isIMEComposingRef.current = true;
+  };
+
+  const handleCompositionEnd = () => {
+    setTimeout(() => {
+      isIMEComposingRef.current = false;
+    }, 0);
+  };
+
+  const isIMEInteraction = (event?: React.KeyboardEvent) => {
+    if (isIMEComposingRef.current) {
+      return true;
+    }
+
+    if (!event) {
+      return false;
+    }
+
+    const nativeEvent = event.nativeEvent;
+
+    if (nativeEvent.isComposing) {
+      return true;
+    }
+
+    const key = nativeEvent.key;
+    if (key === 'Process' || key === 'Unidentified') {
+      return true;
+    }
+
+    const keyboardEvent = nativeEvent as unknown as KeyboardEvent;
+    const keyCode = keyboardEvent.keyCode ?? (keyboardEvent as unknown as { which?: number }).which;
+    if (keyCode === 229) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const handleSend = () => {
+    if (isIMEInteraction()) {
+      return;
+    }
+
+    if (prompt.trim() && !disabled) {
+      let finalPrompt = prompt.trim();
+
+      // Append thinking phrase if not auto mode
+      const thinkingMode = THINKING_MODES.find(m => m.id === selectedThinkingMode);
+      if (thinkingMode && thinkingMode.phrase) {
+        finalPrompt = `${finalPrompt}.\n\n${thinkingMode.phrase}.`;
+      }
+
+      onSend(finalPrompt, selectedModel);
+      setPrompt("");
+      setEmbeddedImages([]);
+      setTextareaHeight(48); // Reset height after sending
+    }
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (showFilePicker && e.key === 'Escape') {
       e.preventDefault();
@@ -679,7 +723,16 @@ const FloatingPromptInputInner = (
       return;
     }
 
-    if (e.key === "Enter" && !e.shiftKey && !isExpanded && !showFilePicker && !showSlashCommandPicker) {
+    if (
+      e.key === "Enter" &&
+      !e.shiftKey &&
+      !isExpanded &&
+      !showFilePicker &&
+      !showSlashCommandPicker
+    ) {
+      if (isIMEInteraction(e)) {
+        return;
+      }
       e.preventDefault();
       handleSend();
     }
@@ -834,6 +887,8 @@ const FloatingPromptInputInner = (
                 ref={expandedTextareaRef}
                 value={prompt}
                 onChange={handleTextChange}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
                 onPaste={handlePaste}
                 placeholder="Type your message..."
                 className="min-h-[200px] resize-none"
@@ -1157,15 +1212,21 @@ const FloatingPromptInputInner = (
                   value={prompt}
                   onChange={handleTextChange}
                   onKeyDown={handleKeyDown}
+                  onCompositionStart={handleCompositionStart}
+                  onCompositionEnd={handleCompositionEnd}
                   onPaste={handlePaste}
-                  placeholder={dragActive ? "Drop images here..." : "Message Claude (@ for files, / for commands)..."}
+                  placeholder={
+                    dragActive
+                      ? "Drop images here..."
+                      : "Message Claude (@ for files, / for commands)..."
+                  }
                   disabled={disabled}
                   className={cn(
                     "resize-none pr-20 pl-3 py-2.5 transition-all duration-150",
                     dragActive && "border-primary",
                     textareaHeight >= 240 && "overflow-y-auto scrollbar-thin"
                   )}
-                  style={{ 
+                  style={{
                     height: `${textareaHeight}px`,
                     overflowY: textareaHeight >= 240 ? 'auto' : 'hidden'
                   }}
diff --git a/src/components/TimelineNavigator.tsx b/src/components/TimelineNavigator.tsx
@@ -67,10 +67,13 @@ export const TimelineNavigator: React.FC<TimelineNavigatorProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [diff, setDiff] = useState<CheckpointDiff | null>(null);
   const [compareCheckpoint, setCompareCheckpoint] = useState<Checkpoint | null>(null);
-  
+
   // Analytics tracking
   const trackEvent = useTrackEvent();
 
+  // IME composition state
+  const isIMEComposingRef = React.useRef(false);
+
   // Load timeline on mount and whenever refreshVersion bumps
   useEffect(() => {
     loadTimeline();
@@ -193,6 +196,16 @@ export const TimelineNavigator: React.FC<TimelineNavigatorProps> = ({
     onFork(checkpoint.id);
   };
 
+  const handleCompositionStart = () => {
+    isIMEComposingRef.current = true;
+  };
+
+  const handleCompositionEnd = () => {
+    setTimeout(() => {
+      isIMEComposingRef.current = false;
+    }, 0);
+  };
+
   const handleCompare = async (checkpoint: Checkpoint) => {
     if (!selectedCheckpoint) {
       setSelectedCheckpoint(checkpoint);
@@ -481,11 +494,16 @@ export const TimelineNavigator: React.FC<TimelineNavigatorProps> = ({
                 placeholder="e.g., Before major refactoring"
                 value={checkpointDescription}
                 onChange={(e) => setCheckpointDescription(e.target.value)}
-                onKeyPress={(e) => {
+                onKeyDown={(e) => {
                   if (e.key === "Enter" && !isLoading) {
+                    if (e.nativeEvent.isComposing || isIMEComposingRef.current) {
+                      return;
+                    }
                     handleCreateCheckpoint();
                   }
                 }}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
               />
             </div>
           </div>
diff --git a/src/components/WebviewPreview.tsx b/src/components/WebviewPreview.tsx
