issue-327: fix search input can not input chinese in react18 which us…

…e ReactDOM.createRoot to create app
timc1 · Nov 17, 2023 · 3e0de56 · 3e0de56 · vercel · Nov 17, 2023
1 parent 778ba3f
commit 3e0de56
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/KBarSearch.tsx b/src/KBarSearch.tsx
@@ -26,6 +26,11 @@ export function KBarSearch(
     showing: state.visualState === VisualState.showing,
   }));
 
+  const [inputValue, setInputValue] = React.useState(search);
+  React.useEffect(() => {
+    query.setSearch(inputValue);
+   }, [inputValue, query]);
+
   const { defaultPlaceholder, ...rest } = props;
 
   React.useEffect(() => {
@@ -52,11 +57,11 @@ export function KBarSearch(
       aria-expanded={showing}
       aria-controls={KBAR_LISTBOX}
       aria-activedescendant={getListboxItemId(activeIndex)}
-      value={search}
+      value={inputValue}
       placeholder={placeholder}
       onChange={(event) => {
         props.onChange?.(event);
-        query.setSearch(event.target.value);
+        setInputValue(event.target.value);
         options?.callbacks?.onQueryChange?.(event.target.value);
       }}
       onKeyDown={(event) => {