Fixed keyboard navigation not working in filtered search bar

2 files changed, 22 insertions, 4 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();
+        }
       }
     }