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

@@ -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"
     }
   ]
 }

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

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