From ee90b55956704d52ce9e9d53058b7d8d41e44a2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Fri, 24 Nov 2023 20:57:20 +0700
Subject: [PATCH] Improve search bar navigation

---
 assets/css/autocomplete.css                            |  2 +-
 assets/js/autocomplete/autocomplete-list.js            |  4 ++++
 assets/js/search-bar.js                                | 10 ++++++++--
 .../formatter/html/templates/sidebar_template.eex      |  2 --
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
index ed37e4b0b..6fb1c86eb 100644
--- a/assets/css/autocomplete.css
+++ b/assets/css/autocomplete.css
@@ -16,7 +16,7 @@
   top: 9px;
   left: 10%;
   transform: translateX(-50%);
-  z-index: 250;
+  z-index: 100;
   background-color: transparent;
 }
 
diff --git a/assets/js/autocomplete/autocomplete-list.js b/assets/js/autocomplete/autocomplete-list.js
index 346aa6f70..3c73e61b0 100644
--- a/assets/js/autocomplete/autocomplete-list.js
+++ b/assets/js/autocomplete/autocomplete-list.js
@@ -2,6 +2,7 @@ import { getSuggestions } from './suggestions'
 import { isBlank, qs } from '../helpers'
 
 export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete'
+export const AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR = '.autocomplete-suggestions'
 export const AUTOCOMPLETE_SUGGESTION_SELECTOR = '.autocomplete-suggestion'
 
 const state = {
@@ -88,6 +89,9 @@ export function moveAutocompleteSelection (offset) {
 
   if (elementToSelect) {
     elementToSelect.classList.add('selected')
+    elementToSelect.scrollIntoView({ block: 'nearest' })
+  } else {
+    qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR).scrollTop = 0
   }
 }
 
diff --git a/assets/js/search-bar.js b/assets/js/search-bar.js
index e49c0c0d5..a65527435 100644
--- a/assets/js/search-bar.js
+++ b/assets/js/search-bar.js
@@ -41,15 +41,17 @@ function addEventListeners () {
   const searchInput = qs(SEARCH_INPUT_SELECTOR)
 
   searchInput.addEventListener('keydown', event => {
+    const macOS = isMacOS()
+
     if (event.key === 'Escape') {
       clearSearch()
       searchInput.blur()
     } else if (event.key === 'Enter') {
       handleAutocompleteFormSubmission(event)
-    } else if (event.key === 'ArrowUp') {
+    } else if (event.key === 'ArrowUp' || (macOS && event.ctrlKey && event.key === 'p')) {
       moveAutocompleteSelection(-1)
       event.preventDefault()
-    } else if (event.key === 'ArrowDown') {
+    } else if (event.key === 'ArrowDown' || (macOS && event.ctrlKey && event.key === 'n')) {
       moveAutocompleteSelection(1)
       event.preventDefault()
     }
@@ -135,3 +137,7 @@ function hideAutocomplete () {
   document.body.classList.remove('search-focused')
   hideAutocompleteList()
 }
+
+function isMacOS () {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+}
diff --git a/lib/ex_doc/formatter/html/templates/sidebar_template.eex b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
index bf277053d..f58101d32 100644
--- a/lib/ex_doc/formatter/html/templates/sidebar_template.eex
+++ b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
@@ -89,6 +89,4 @@
         </div>
       </div>
       <div class="autocomplete">
-        <div class="autocomplete-results">
-        </div>
       </div>