fix: update quick search close function

packages/app/src/components/quick-search/Footer.tsx

@@ -1,26 +1,23 @@
 import React from 'react';
 import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
-import { useModal } from '@/providers/GlobalModalProvider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';
-export const Footer = (props: { query: string }) => {
+export const Footer = (props: { query: string; onClose: () => void }) => {
-  const { triggerQuickSearchModal } = useModal();
   const { openPage, createPage } = usePageHelper();
   const { t } = useTranslation();
-  const query = props.query;
+  const { query, onClose } = props;
 
   return (
     <Command.Item
       data-testid="quickSearch-addNewPage"
       onSelect={async () => {
+        onClose();
         const pageId = await createPage({ title: query });
         if (pageId) {
           openPage(pageId);
         }
-
-        triggerQuickSearchModal();
       }}
     >
       <StyledModalFooterContent>

packages/app/src/components/quick-search/Input.tsx

@@ -28,12 +28,9 @@ export const Input = (props: {
       },
       true
     );
+    setInputValue(props.query);
     return inputRef.current?.focus();
-  }, [inputRef]);
+  }, [inputRef, props.query]);
-  useEffect(() => {
-    return setInputValue(props.query);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return (
     <StyledInputContent>
       <StyledLabel htmlFor=":r5:">

packages/app/src/components/quick-search/Results.tsx

@@ -1,6 +1,5 @@
 import { Command } from 'cmdk';
 import { StyledListItem, StyledNotFound } from './style';
-import { useModal } from '@/providers/GlobalModalProvider';
 import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
@@ -12,14 +11,11 @@ import usePageHelper from '@/hooks/use-page-helper';
 export const Results = (props: {
   query: string;
   loading: boolean;
+  onClose: () => void;
   setLoading: Dispatch<SetStateAction<boolean>>;
   setShowCreatePage: Dispatch<SetStateAction<boolean>>;
 }) => {
-  const query = props.query;
+  const { query, loading, setLoading, setShowCreatePage, onClose } = props;
-  const loading = props.loading;
-  const setLoading = props.setLoading;
-  const setShowCreatePage = props.setShowCreatePage;
-  const { triggerQuickSearchModal } = useModal();
   const { openPage } = usePageHelper();
   const router = useRouter();
   const { currentWorkspace, pageList } = useAppState();
@@ -55,8 +51,8 @@ export const Results = (props: {
                 <Command.Item
                   key={result.id}
                   onSelect={() => {
+                    onClose();
                     openPage(result.id);
-                    triggerQuickSearchModal();
                   }}
                   value={result.id}
                 >
@@ -86,8 +82,8 @@ export const Results = (props: {
                 key={link.title}
                 value={link.title}
                 onSelect={() => {
+                  onClose();
                   router.push(link.href);
-                  triggerQuickSearchModal();
                 }}
               >
                 <StyledListItem>

packages/app/src/components/quick-search/index.tsx

@@ -31,11 +31,16 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [showCreatePage, setShowCreatePage] = useState(true);
   const { triggerQuickSearchModal } = useModal();
 
+  const handleClose = () => {
+    setQuery('');
+    onClose();
+  };
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
         const selection = window.getSelection();
+        setQuery('');
         if (selection?.toString()) {
           triggerQuickSearchModal(false);
           return;
@@ -45,9 +50,6 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
         }
       }
     };
-    if (!open) {
-      setQuery('');
-    }
     document.addEventListener('keydown', down, { capture: true });
     return () =>
       document.removeEventListener('keydown', down, { capture: true });
@@ -64,7 +66,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   return (
     <Modal
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       wrapperPosition={['top', 'center']}
       data-testid="quickSearch"
     >
@@ -108,6 +110,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                   query={query}
                   loading={loading}
                   setLoading={setLoading}
+                  onClose={handleClose}
                   setShowCreatePage={setShowCreatePage}
                 />
               ) : (
@@ -115,7 +118,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                   query={query}
                   loading={loading}
                   setLoading={setLoading}
-                  onClose={onClose}
+                  onClose={handleClose}
                   setPublishWorkspaceName={setPublishWorkspaceName}
                 />
               )}
@@ -125,7 +128,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                 <>
                   <StyledModalDivider />
                   <StyledModalFooter>
-                    <Footer query={query} />
+                    <Footer query={query} onClose={handleClose} />
                   </StyledModalFooter>
                 </>
               ) : null