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() + } } } }