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) => {
}}
>
-
+
{isMac() ? '⌘ + K' : 'Ctrl + K'}
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>;
setLoading: Dispatch>;
}) => {
const [isComposition, setIsComposition] = useState(false);
+ const [inputValue, setInputValue] = useState('');
const inputRef = useRef(null);
useEffect(() => {
return inputRef.current?.focus();
@@ -25,12 +25,17 @@ export const Input = (props: {
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);