From 888e0e49ec285b7eff2b4db916f48ebb57994def Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 16 Dec 2022 11:25:00 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Ahandle=20composition=20Event?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/src/components/quick-search/input.tsx | 32 ++++++++++++++++---
 .../src/components/quick-search/results.tsx   | 11 ++-----
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx
index bdffe50d25..0312bd1b3c 100644
--- a/packages/app/src/components/quick-search/input.tsx
+++ b/packages/app/src/components/quick-search/input.tsx
@@ -1,4 +1,10 @@
-import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
@@ -7,6 +13,7 @@ export const Input = (props: {
   setQuery: Dispatch<SetStateAction<string>>;
   setLoading: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const [isComposition, setIsComposition] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     return inputRef.current?.focus();
@@ -18,10 +25,27 @@ export const Input = (props: {
       </StyledLabel>
       <Command.Input
         ref={inputRef}
-        value={props.query}
+        onCompositionStart={() => setIsComposition(true)}
+        onCompositionEnd={e => {
+          props.setQuery(e.data);
+          setIsComposition(false);
+        }}
         onValueChange={str => {
-          props.setQuery(str);
-          props.setLoading(true);
+          if (!isComposition) {
+            props.setQuery(str);
+            props.setLoading(true);
+          }
+        }}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (isComposition) {
+            if (
+              e.key === 'ArrowDown' ||
+              e.key === 'ArrowUp' ||
+              e.key === 'Enter'
+            ) {
+              e.stopPropagation();
+            }
+          }
         }}
         placeholder="Quick Search..."
       />
diff --git a/packages/app/src/components/quick-search/results.tsx b/packages/app/src/components/quick-search/results.tsx
index 9e279bd4ad..d3dc1ab0d0 100644
--- a/packages/app/src/components/quick-search/results.tsx
+++ b/packages/app/src/components/quick-search/results.tsx
@@ -1,12 +1,7 @@
 import { Command } from 'cmdk';
 import { StyledListItem, StyledNotFound } from './style';
 import { useModal } from '@/providers/global-modal-provider';
-import {
-  PaperIcon,
-  EdgelessIcon,
-  LogoUnlogIcon,
-  AllPagesIcon,
-} from '@blocksuite/icons';
+import { PaperIcon, EdgelessIcon, LogoUnlogIcon } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
@@ -34,15 +29,13 @@ export const Results = (props: {
   const pageIds = [...results.values()];
 
   const resultsPageMeta = pageList.filter(
-    page => pageIds.indexOf(page.id) > -1 && page.trash !== true
+    page => pageIds.indexOf(page.id) > -1 && !page.trash
   );
 
   useEffect(() => {
     setShowCreatePage(resultsPageMeta.length ? false : true);
     //Determine whether to display the  ‘+ New page’
   }, [resultsPageMeta, setShowCreatePage]);
-  console.log(resultsPageMeta);
-
   return loading ? null : (
     <Command.List>
       {query ? (