shelley/ui: fix IME character conversion triggering form submission

Philip Zeyliger created 4 months ago

Prompt: In a new worktree, reset to origin/main, and fix https://github.com/boldsoftware/exe.dev/issues/71

When using an IME (Input Method Editor) for Japanese/Chinese input,
pressing Enter to confirm character conversion (e.g., hiragana to
kanji) was causing unintended form submissions.

The fix checks KeyboardEvent.isComposing before handling Enter key
events, which is the standard way to detect if an IME composition
is in progress.

Fixes boldsoftware/exe.dev#71

Change summary

ui/src/components/ConversationDrawer.tsx   | 4 ++++
ui/src/components/DirectoryPickerModal.tsx | 4 ++++
ui/src/components/MessageInput.tsx         | 4 ++++
3 files changed, 12 insertions(+)

Detailed changes

ui/src/components/ConversationDrawer.tsx

@@ -172,6 +172,10 @@ function ConversationDrawer({
   };
 
   const handleRenameKeyDown = (e: React.KeyboardEvent, conversationId: string) => {
+    // Don't submit while IME is composing (e.g., converting Japanese hiragana to kanji)
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
     if (e.key === "Enter") {
       e.preventDefault();
       handleRename(conversationId);

ui/src/components/DirectoryPickerModal.tsx

@@ -172,6 +172,10 @@ function DirectoryPickerModal({
   };
 
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Don't submit while IME is composing (e.g., converting Japanese hiragana to kanji)
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
     if (e.key === "Enter") {
       e.preventDefault();
       handleSelect();

ui/src/components/MessageInput.tsx

@@ -304,6 +304,10 @@ function MessageInput({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Don't submit while IME is composing (e.g., converting Japanese hiragana to kanji)
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e);