fix(web): keep settings inputs focused during IME composition

apps/web/src/hooks/useCommitOnBlur.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { shouldBlurCommitOnKeyDown } from "./useCommitOnBlur";
+
+function keyEvent(overrides: {
+  key?: string;
+  keyCode?: number;
+  isComposing?: boolean;
+}): Parameters<typeof shouldBlurCommitOnKeyDown>[0] {
+  return {
+    key: overrides.key ?? "Enter",
+    keyCode: overrides.keyCode ?? 13,
+    nativeEvent: { isComposing: overrides.isComposing ?? false },
+  };
+}
+
+describe("shouldBlurCommitOnKeyDown", () => {
+  it("commits on Enter after composition has finished", () => {
+    expect(shouldBlurCommitOnKeyDown(keyEvent({ key: "Enter" }))).toBe(true);
+  });
+
+  it("keeps focus during IME composition", () => {
+    expect(shouldBlurCommitOnKeyDown(keyEvent({ key: "Enter", isComposing: true }))).toBe(false);
+    expect(shouldBlurCommitOnKeyDown(keyEvent({ key: "Enter", keyCode: 229 }))).toBe(false);
+  });
+
+  it("ignores other keys", () => {
+    expect(shouldBlurCommitOnKeyDown(keyEvent({ key: "Escape" }))).toBe(false);
+  });
+});

apps/web/src/hooks/useCommitOnBlur.ts

@@ -15,6 +15,15 @@ import { type ChangeEvent, type KeyboardEvent, useState } from "react";
  *   const bag = useCommitOnBlur(instance.displayName ?? "", (next) => {...});
  *   <Input {...bag} placeholder="e.g. Work" />
  */
+export function shouldBlurCommitOnKeyDown(event: {
+  readonly key: string;
+  readonly keyCode: number;
+  readonly nativeEvent: { readonly isComposing?: boolean };
+}): boolean {
+  if (event.nativeEvent.isComposing || event.keyCode === 229) return false;
+  return event.key === "Enter";
+}
+
 export function useCommitOnBlur(value: string, onCommit: (next: string) => void) {
   const [draft, setDraft] = useState<string | null>(null);
 
@@ -34,10 +43,9 @@ export function useCommitOnBlur(value: string, onCommit: (next: string) => void)
       }
     },
     onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        (event.target as HTMLInputElement).blur();
-      }
+      if (!shouldBlurCommitOnKeyDown(event)) return;
+      event.preventDefault();
+      (event.target as HTMLInputElement).blur();
     },
   };
 }