diff --git a/packages/app/src/components/quick-search/Footer.tsx b/packages/app/src/components/quick-search/Footer.tsx index 14b37561b6..cc84003a5b 100644 --- a/packages/app/src/components/quick-search/Footer.tsx +++ b/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 }) => { - const { triggerQuickSearchModal } = useModal(); +export const Footer = (props: { query: string; onClose: () => void }) => { const { openPage, createPage } = usePageHelper(); const { t } = useTranslation(); - const query = props.query; + const { query, onClose } = props; return ( { + onClose(); const pageId = await createPage({ title: query }); if (pageId) { openPage(pageId); } - - triggerQuickSearchModal(); }} > diff --git a/packages/app/src/components/quick-search/Input.tsx b/packages/app/src/components/quick-search/Input.tsx index e39d92e6b9..2a8778da05 100644 --- a/packages/app/src/components/quick-search/Input.tsx +++ b/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]); - useEffect(() => { - return setInputValue(props.query); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [inputRef, props.query]); return ( diff --git a/packages/app/src/components/quick-search/Results.tsx b/packages/app/src/components/quick-search/Results.tsx index 9e23c5f7c6..d7c8eddb0b 100644 --- a/packages/app/src/components/quick-search/Results.tsx +++ b/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>; setShowCreatePage: Dispatch>; }) => { - const query = props.query; - const loading = props.loading; - const setLoading = props.setLoading; - const setShowCreatePage = props.setShowCreatePage; - const { triggerQuickSearchModal } = useModal(); + const { query, loading, setLoading, setShowCreatePage, onClose } = props; const { openPage } = usePageHelper(); const router = useRouter(); const { currentWorkspace, pageList } = useAppState(); @@ -55,8 +51,8 @@ export const Results = (props: { { + 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(); }} > diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 7c24f0b970..15659e5558 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/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 ( @@ -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) => { <> -