Improve search bar navigation (#1827)

Author: jonatanklosko

assets/css/autocomplete.css

@@ -16,7 +16,7 @@
   top: 9px;
   left: 10%;
   transform: translateX(-50%);
-  z-index: 250;
+  z-index: 100;
   background-color: transparent;
 }
 

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
   }
 }
 

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

lib/ex_doc/formatter/html/templates/sidebar_template.eex

@@ -89,6 +89,4 @@
         </div>
       </div>
       <div class="autocomplete">
-        <div class="autocomplete-results">
-        </div>
       </div>