From fcee6003d805f72b7fd2e1c7fd49e7a5f50ccba0 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 9 May 2025 18:19:22 +0300
Subject: [PATCH] docs: fix keyboard navigation in search (#12434)

---
 .../src/components/Search/Hits/index.tsx      |  1 +
 .../src/hooks/use-search-navigation/index.ts  | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/www/packages/docs-ui/src/components/Search/Hits/index.tsx b/www/packages/docs-ui/src/components/Search/Hits/index.tsx
index b431a795b5..4162d37286 100644
--- a/www/packages/docs-ui/src/components/Search/Hits/index.tsx
+++ b/www/packages/docs-ui/src/components/Search/Hits/index.tsx
@@ -126,6 +126,7 @@ export const SearchHits = ({
         "[&_mark]:bg-medusa-bg-highlight",
         "[&_mark]:text-medusa-fg-interactive"
       )}
+      data-group
     >
       {hits.map((item, index) => {
         const hierarchies = Object.values(item.hierarchy)
diff --git a/www/packages/docs-ui/src/hooks/use-search-navigation/index.ts b/www/packages/docs-ui/src/hooks/use-search-navigation/index.ts
index 110f2cbee8..1a3cfa5561 100644
--- a/www/packages/docs-ui/src/hooks/use-search-navigation/index.ts
+++ b/www/packages/docs-ui/src/hooks/use-search-navigation/index.ts
@@ -65,8 +65,18 @@ export const useSearchNavigation = ({
         // find if there's a data-hit item before this one
         const beforeItem = findPrevSibling(focusedItem, "[data-hit]")
         if (!beforeItem) {
-          // focus the input
-          focusInput()
+          // check if there's a data-group before this one
+          const beforeGroup = focusedItem.parentElement
+            ? (findPrevSibling(focusedItem.parentElement, "[data-group]")
+                ?.lastElementChild as HTMLElement)
+            : null
+          if (beforeGroup) {
+            // focus the last item in the previous group
+            beforeGroup.focus()
+          } else {
+            // focus the input
+            focusInput()
+          }
         } else {
           // focus the previous item
           beforeItem.focus()
@@ -87,6 +97,15 @@ export const useSearchNavigation = ({
         if (afterItem) {
           // focus the next item
           afterItem.focus()
+        } else if (focusedItem.parentElement) {
+          // try to go to next hit in the next group
+          const nextGroupFirstItem = findNextSibling(
+            focusedItem.parentElement,
+            "[data-group]"
+          )?.firstElementChild as HTMLElement
+          if (nextGroupFirstItem) {
+            nextGroupFirstItem.focus()
+          }
         }
       }
     }