From 35003642bf6967938516c9f60b4d5810c174166b Mon Sep 17 00:00:00 2001
From: Favour Afolayan <favourafolayan@gmail.com>
Date: Tue, 18 Apr 2023 10:29:45 +0100
Subject: [PATCH] Trigger search input focus on slash key

---
 src/components/Search/index.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 52ec007ec9..dd412fff68 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -27,6 +27,23 @@ const Search = ({ searchID }: { searchID?: string }): JSX.Element => {
   useEffect(() => {
     runDocsearchIfPossible()
 
+    const handleSearchTrigger = (event: KeyboardEvent) => {
+      const slashKeyPressed = event.key === "/" || event.code === "Slash"
+      if (!slashKeyPressed) {
+        return
+      }
+      event.preventDefault()
+      const searchInput = document.querySelector<HTMLInputElement>(
+        `#${searchInputID}`
+      )
+
+      if (searchInput) {
+        searchInput.focus()
+      }
+    }
+
+    window.addEventListener("keypress", handleSearchTrigger)
+
     if (document.getElementById("algolia-search")) return
 
     const searchScript = document.createElement("script")
@@ -49,6 +66,10 @@ const Search = ({ searchID }: { searchID?: string }): JSX.Element => {
     }
 
     document.body.appendChild(searchScript)
+
+    return () => {
+      window.removeEventListener("keypress", handleSearchTrigger)
+    }
   }, [])
 
   return (