fix: correctly handle composition in search input. fixes #2048

1 files changed, 21 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index dad995e1..3f49a53c 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -91,16 +91,34 @@ const SearchInput = React.forwardRef<
 
   const inputRef = useRef<HTMLInputElement>(null);
   const isHistorySelected = useRef(false);
+  const isComposing = useRef(false);
 
   const handleValueChange = useCallback(
     (newValue: string) => {
       setValue(newValue);
-      debounceSearch(newValue);
+      // Only trigger debounced search if not in IME composition mode
+      if (!isComposing.current) {
+        debounceSearch(newValue);
+      }
       isHistorySelected.current = false; // Reset flag when user types
     },
     [debounceSearch],
   );
 
+  const handleCompositionStart = useCallback(() => {
+    isComposing.current = true;
+  }, []);
+
+  const handleCompositionEnd = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement>) => {
+      isComposing.current = false;
+      // Trigger search with the final composed value
+      const target = e.target as HTMLInputElement;
+      debounceSearch(target.value);
+    },
+    [debounceSearch],
+  );
+
   const suggestions = useMemo(() => {
     if (value.trim() === "") {
       // Show recent items when not typing
@@ -210,6 +228,8 @@ const SearchInput = React.forwardRef<
                 placeholder={t("common.search")}
                 value={value}
                 onValueChange={handleValueChange}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 className={cn("h-10", className)}