From c79452bb228ce8b7e199634708a985ac36a605ab Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Sat, 25 Jul 2020 22:52:55 +0200
Subject: [PATCH] sidebar search enhancements (#2929)

* add ability to move across entries with arrow keys
* small style fixes for sidebar search
* bump bundlewatch size
---
 .bundlewatch.config.json      |  4 ++--
 build/js/SidebarSearch.js     | 38 ++++++++++++++++++++++++++++++++++-
 build/scss/_main-sidebar.scss | 36 ++++++++++++++++++++++++++++-----
 3 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index f64b44ab9..ee345dc31 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -50,11 +50,11 @@
     },
     {
       "path": "./dist/js/adminlte.js",
-      "maxSize": "11.6 kB"
+      "maxSize": "12 kB"
     },
     {
       "path": "./dist/js/adminlte.min.js",
-      "maxSize": "7.5 kB"
+      "maxSize": "8 kB"
     }
   ]
 }
diff --git a/build/js/SidebarSearch.js b/build/js/SidebarSearch.js
index 092c631d8..88f4b3806 100644
--- a/build/js/SidebarSearch.js
+++ b/build/js/SidebarSearch.js
@@ -226,7 +226,19 @@ $(document).on('click', SELECTOR_SEARCH_BUTTON, event => {
   SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggle')
 })
 
-$(document).on('keyup', SELECTOR_SEARCH_INPUT, () => {
+$(document).on('keyup', SELECTOR_SEARCH_INPUT, event => {
+  if (event.keyCode == 38) {
+    event.preventDefault()
+    $(SELECTOR_SEARCH_RESULTS_GROUP).children().last().focus()
+    return
+  }
+
+  if (event.keyCode == 40) {
+    event.preventDefault()
+    $(SELECTOR_SEARCH_RESULTS_GROUP).children().first().focus()
+    return
+  }
+
   let timer = 0
   clearTimeout(timer)
   timer = setTimeout(() => {
@@ -234,6 +246,30 @@ $(document).on('keyup', SELECTOR_SEARCH_INPUT, () => {
   }, 100)
 })
 
+$(document).on('keydown', SELECTOR_SEARCH_RESULTS_GROUP, event => {
+  const $focused = $(':focus')
+
+  if (event.keyCode == 38) {
+    event.preventDefault()
+
+    if ($focused.is(':first-child')) {
+      $focused.siblings().last().focus()
+    } else {
+      $focused.prev().focus()
+    }
+  }
+
+  if (event.keyCode == 40) {
+    event.preventDefault()
+
+    if ($focused.is(':last-child')) {
+      $focused.siblings().first().focus()
+    } else {
+      $focused.next().focus()
+    }
+  }
+})
+
 $(window).on('load', () => {
   SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'init')
 })
diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss
index d3a04cff5..ce1917a46 100644
--- a/build/scss/_main-sidebar.scss
+++ b/build/scss/_main-sidebar.scss
@@ -993,6 +993,24 @@
   }
 }
 
+[data-widget="sidebar-search"] {
+  input[type="search"] {
+    &::-ms-clear,
+    &::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+}
+
 .sidebar-search-results {
   position: relative;
   display: none;
@@ -1011,13 +1029,21 @@
     width: 100%;
     z-index: $zindex-main-sidebar + 1;
 
-    .list-group-item {
+    > .list-group-item {
       padding: $input-padding-y $input-padding-x;
-    }
 
-    > .list-group-item:first-child {
-      border-top: 0;
-      @include border-top-radius(0);
+      &:-moz-focusring {
+        margin-top: 0;
+        border-left: 1px solid transparent;
+        border-top: 0;
+        border-bottom: 1px solid transparent;
+      }
+
+      &:first-child {
+        margin-top: 0;
+        border-top: 0;
+        @include border-top-radius(0);
+      }
     }
   }
 }