1 files changed, 61 insertions, 3 deletions
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 ffd0d7e9cba..8d62324b79f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -25,24 +25,32 @@
     }
 
     bindEvents() {
+      this.handleFormSubmit = this.handleFormSubmit.bind(this);
       this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
       this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
       this.clearSearchWrapper = this.clearSearch.bind(this);
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+      this.tokenChange = this.tokenChange.bind(this);
 
+      this.filteredSearchInput.form.addEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
       this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.addEventListener('click', this.tokenChange);
+      this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
     }
 
     unbindEvents() {
+      this.filteredSearchInput.form.removeEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
       this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.removeEventListener('click', this.tokenChange);
+      this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
     }
 
@@ -56,13 +64,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();
+        }
       }
     }
 
@@ -83,8 +104,14 @@
       this.dropdownManager.resetDropdowns();
     }
 
+    handleFormSubmit(e) {
+      e.preventDefault();
+      this.search();
+    }
+
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
+      const usernameParams = this.getUsernameParams();
       const inputValues = [];
 
       params.forEach((p) => {
@@ -115,6 +142,16 @@
             }
 
             inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+          } else if (!match && keyParam === 'assignee_id') {
+            const id = parseInt(value, 10);
+            if (usernameParams[id]) {
+              inputValues.push(`assignee:@${usernameParams[id]}`);
+            }
+          } else if (!match && keyParam === 'author_id') {
+            const id = parseInt(value, 10);
+            if (usernameParams[id]) {
+              inputValues.push(`author:@${usernameParams[id]}`);
+            }
           } else if (!match && keyParam === 'search') {
             inputValues.push(sanitizedValue);
           }
@@ -164,6 +201,27 @@
 
       Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`);
     }
+
+    getUsernameParams() {
+      const usernamesById = {};
+      try {
+        const attribute = this.filteredSearchInput.getAttribute('data-username-params');
+        JSON.parse(attribute).forEach((user) => {
+          usernamesById[user.id] = user.username;
+        });
+      } catch (e) {
+        // do nothing
+      }
+      return usernamesById;
+    }
+
+    tokenChange() {
+      const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
+      const currentDropdownRef = dropdown.reference;
+
+      this.setDropdownWrapper();
+      currentDropdownRef.dispatchInputEvent();
+    }
   }
 
   window.gl = window.gl || {};