From 1ef492dbc8957e735407396045dcf85b7176a2fe Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 16 Dec 2022 11:51:22 +0800
Subject: [PATCH] fix: composition bug

---
 packages/app/src/components/quick-search/index.tsx | 2 +-
 packages/app/src/components/quick-search/input.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 90763967ad..ff22ef2ba1 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -61,7 +61,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           }}
         >
           <StyledModalHeader>
-            <Input query={query} setQuery={setQuery} setLoading={setLoading} />
+            <Input setQuery={setQuery} setLoading={setLoading} />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider />
diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx
index 0312bd1b3c..715822a490 100644
--- a/packages/app/src/components/quick-search/input.tsx
+++ b/packages/app/src/components/quick-search/input.tsx
@@ -9,11 +9,11 @@ import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
 export const Input = (props: {
-  query: string;
   setQuery: Dispatch<SetStateAction<string>>;
   setLoading: Dispatch<SetStateAction<boolean>>;
 }) => {
   const [isComposition, setIsComposition] = useState(false);
+  const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     return inputRef.current?.focus();
@@ -25,12 +25,17 @@ export const Input = (props: {
       </StyledLabel>
       <Command.Input
         ref={inputRef}
-        onCompositionStart={() => setIsComposition(true)}
+        value={inputValue}
+        onCompositionStart={e => {
+          setIsComposition(true);
+        }}
         onCompositionEnd={e => {
           props.setQuery(e.data);
           setIsComposition(false);
+          props.setLoading(true);
         }}
         onValueChange={str => {
+          setInputValue(str);
           if (!isComposition) {
             props.setQuery(str);
             props.setLoading(true);