Fixed keyboard navigation not working in filtered search bar

3 files changed, 39 insertions, 11 deletions

diff --git a/app/assets/javascripts/droplab/droplab_filter.js b/app/assets/javascripts/droplab/droplab_filter.js
index 41a220831f9..9eb7893fe95 100644
--- a/app/assets/javascripts/droplab/droplab_filter.js
+++ b/app/assets/javascripts/droplab/droplab_filter.js
@@ -3,6 +3,7 @@
 /* global droplab */
 
 require('../window')(function(w){
+  var whiteListedKeys = [37, 38, 39, 40];
   w.droplabFilter = {
 
     keydownWrapper: function(e){
@@ -17,6 +18,10 @@ require('../window')(function(w){
           return;
         }
 
+        if (whiteListedKeys.indexOf(e.detail.which) !== -1) {
+          return;
+        }
+
         if (config && config.filterFunction && typeof config.filterFunction === 'function') {
           filterFunction = config.filterFunction;
         } else {
@@ -57,4 +62,4 @@ module.exports = function(callback) {
 };
 
 },{}]},{},[1])(1)
-});
\ No newline at end of file
+});
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index c7b72b36561..e502802a399 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -61,13 +61,26 @@
     }
 
     checkForEnter(e) {
+      if (e.keyCode === 38 || e.keyCode === 40) {
+        const selectionStart = this.filteredSearchInput.selectionStart;
+
+        e.preventDefault();
+        this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
+      }
+
       if (e.keyCode === 13) {
+        const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
+        const dropdownEl = dropdown.element;
+        const activeElements = dropdownEl.querySelectorAll('.dropdown-active');
+
         e.preventDefault();
 
-        // Prevent droplab from opening dropdown
-        this.dropdownManager.destroyDroplab();
+        if (!activeElements.length) {
+          // Prevent droplab from opening dropdown
+          this.dropdownManager.destroyDroplab();
 
-        this.search();
+          this.search();
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index d957ec64654..4b05ec691a8 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -79,6 +79,16 @@
   overflow: auto;
 }
 
+%filter-dropdown-item-btn-hover {
+  background-color: $dropdown-hover-color;
+  color: $white-light;
+  text-decoration: none;
+
+  .avatar {
+    border-color: $white-light;
+  }
+}
+
 .filter-dropdown-item {
   .btn {
     border: none;
@@ -103,13 +113,7 @@
 
     &:hover,
     &:focus {
-      background-color: $dropdown-hover-color;
-      color: $white-light;
-      text-decoration: none;
-
-      .avatar {
-        border-color: $white-light;
-      }
+      @extend %filter-dropdown-item-btn-hover;
     }
   }
 
@@ -131,6 +135,12 @@
   }
 }
 
+.filter-dropdown-item.dropdown-active {
+  .btn {
+    @extend %filter-dropdown-item-btn-hover;
+  }
+}
+
 .hint-dropdown {
   width: 250px;
 }