Merge pull request #846 from toeverything/fix/quick-search-input

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

tests/quick-search.spec.ts

@@ -8,15 +8,19 @@ loadPage();
 const openQuickSearchByShortcut = async (page: Page) =>
   await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
 
-async function assertTitleTexts(page: Page, texts: string) {
+async function assertTitleTexts(page: Page, texts: string, isSearch?: boolean) {
-  await page.title();
+  if (isSearch) {
-  const actual = await page.evaluate(() => {
+    const actual = await page.evaluate(() => {
-    const titleElement = <HTMLTextAreaElement>(
+      const titleElement = <HTMLTextAreaElement>(
-      document.querySelector('.affine-default-page-block-title')
+        document.querySelector('.affine-default-page-block-title')
-    );
+      );
-    return titleElement.value;
+      return titleElement.value;
-  });
+    });
-  expect(actual).toEqual(texts);
+    expect(actual).toEqual(texts);
+  } else {
+    const actual = await page.title();
+    expect(actual).toEqual(texts);
+  }
 }
 async function assertResultList(page: Page, texts: string[]) {
   const actual = await page.locator('[cmdk-item]').allInnerTexts();
@@ -53,14 +57,13 @@ test.describe('Open quick search', () => {
 });
 
 test.describe('Add new page in quick search', () => {
-  // FIXME: not working
   test('Create a new page without keyword', async ({ page }) => {
     await newPage(page);
     await openQuickSearchByShortcut(page);
     const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
     await addNewPage.click();
     await page.waitForTimeout(300);
-    await assertTitleTexts(page, '');
+    await assertTitleTexts(page, 'Untitled');
   });
 
   test('Create a new page with keyword', async ({ page }) => {
@@ -75,7 +78,7 @@ test.describe('Add new page in quick search', () => {
 });
 
 test.describe('Search and select', () => {
-  test.skip('Create a new page and search this page', async ({ page }) => {
+  test('Create a new page and search this page', async ({ page }) => {
     await newPage(page);
     await openQuickSearchByShortcut(page);
     await page.keyboard.insertText('test123456');
@@ -83,11 +86,11 @@ test.describe('Search and select', () => {
     await addNewPage.click();
     await page.waitForTimeout(300);
     await assertTitleTexts(page, 'test123456');
-    await page.waitForTimeout(100);
     await openQuickSearchByShortcut(page);
-    await page.keyboard.type('test123456');
+    await page.keyboard.insertText('test123456');
     await assertResultList(page, ['test123456']);
-    await page.keyboard.press('Enter', { delay: 50 });
+    await page.keyboard.press('Enter');
-    await assertTitleTexts(page, 'test123456');
+    await page.waitForTimeout(300);
+    await assertTitleTexts(page, 'test123456', true);
   });
 });