fix: close on select

pmndrs · Sep 14, 2024 · 0454035 · 0454035
1 parent baba3b7
commit 0454035
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Search/SearchModalContainer.tsx b/src/components/Search/SearchModalContainer.tsx
@@ -10,7 +10,10 @@ import { ComponentProps } from 'react'
 import type { SearchResult } from './SearchItem'
 import SearchItem from './SearchItem'
 
-export const SearchModalContainer = ({ className }: ComponentProps<'search'>) => {
+export const SearchModalContainer = ({
+ className,
+ close,
+}: ComponentProps<'search'> & { close: () => void }) => {
  const router = useRouter()
  const { docs } = useDocs()
  const [query, setQuery] = React.useState('')
@@ -84,7 +87,10 @@ export const SearchModalContainer = ({ className }: ComponentProps<'search'>) =>
  <Command.Item
  key={`search-item-${index}`}
  value={result.url}
- onSelect={router.push}
+ onSelect={(value) => {
+ router.push(value)
+ close()
+ }}
  className="rounded-md transition-colors data-[selected=true]:bg-surface-container-high"
  >
  <SearchItem search={query} result={result} tabIndex={-1} />

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -36,7 +36,10 @@ function Search({ className }: ComponentProps<typeof Dialog.Trigger>) {
  <Dialog.Close className="size-full" />
  </Dialog.Overlay>
 
- <SearchModalContainer className="relative mx-auto max-w-3xl rounded-md px-4 shadow-sm [--Search-Input-top:theme(spacing.8)] lg:[--Search-Input-top:theme(spacing.24)]" />
+ <SearchModalContainer
+ className="relative mx-auto max-w-3xl rounded-md px-4 shadow-sm [--Search-Input-top:theme(spacing.8)] lg:[--Search-Input-top:theme(spacing.24)]"
+ close={() => setShowSearchModal(false)}
+ />
  </Dialog.Content>
  </Dialog.Portal>
  </Dialog.Root>