docs: clicking outside search results should hide hits (#11925)

* feat: clickSearchBoxOutsideHandler that Doc Search outside click hiding search hits * Update wrapper.tsx * Update wrapper.tsx * Update wrapper.tsx --------- Co-authored-by: 박준서 <[email protected]> Co-authored-by: Balázs Orbán <[email protected]>
nextauthjs · Oct 2, 2024 · 8c00815 · 8c00815
1 parent e9a4d47
commit 8c00815
Showing 1 changed file with 40 additions and 17 deletions.
diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { useEffect, useRef, useState } from "react"
 import algoliasearch from "algoliasearch/lite"
 import { InstantSearch, Hits, useInstantSearch } from "react-instantsearch"
 //import { InstantSearchNext } from "react-instantsearch-nextjs"
@@ -32,35 +32,58 @@ const searchClient = {
   },
 }
 
-export default function () {
-  const ctrlKHandler = (e: KeyboardEvent) => {
-    if (e.repeat || e.target instanceof HTMLInputElement) return
-    if (e.ctrlKey && e.key === "k") {
-      e.preventDefault()
-      document.querySelector<HTMLInputElement>('input[type="search"]')?.focus()
-    }
-  }
+export default function Wrapper() {
+  const docSearchRef = useRef<HTMLDivElement>(null)
+  const [isSearchHitsVisible, setIsSearchHitsVisible] = useState(false)
 
   useEffect(() => {
+    function ctrlKHandler(e: KeyboardEvent) {
+      if (e.repeat || e.target instanceof HTMLInputElement) return
+      if (e.ctrlKey && e.key === "k") {
+        e.preventDefault()
+        document
+          .querySelector<HTMLInputElement>('input[type="search"]')
+          ?.focus()
+      }
+    }
+
+    function clickSearchBoxOutsideHandler(event: MouseEvent) {
+      setIsSearchHitsVisible(
+        Boolean(
+          event.target instanceof Node &&
+            docSearchRef.current?.contains(event.target)
+        )
+      )
+    }
+
     window.addEventListener("keydown", ctrlKHandler)
+    window.addEventListener("mousedown", clickSearchBoxOutsideHandler)
 
-    return window.addEventListener("keydown", ctrlKHandler)
+    return () => {
+      window.removeEventListener("keydown", ctrlKHandler)
+      window.removeEventListener("mousedown", clickSearchBoxOutsideHandler)
+    }
   }, [])
 
   return (
-    <div className="relative [aside_&]:w-full max-md:[nav_&]:hidden">
+    <div
+      ref={docSearchRef}
+      className="relative [aside_&]:w-full max-md:[nav_&]:hidden"
+    >
       <InstantSearch
         indexName="next-auth"
         // @ts-expect-error
         searchClient={searchClient}
       >
         <CustomSearchBox />
-        <NoResultsBoundary>
-          <Hits
-            hitComponent={Hit}
-            className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
-          />
-        </NoResultsBoundary>
+        {isSearchHitsVisible && (
+          <NoResultsBoundary>
+            <Hits
+              hitComponent={Hit}
+              className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
+            />
+          </NoResultsBoundary>
+        )}
       </InstantSearch>
     </div>
   )