fix: close on select

Author: abernier

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} />

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>