Opens dropdown correctly

app/assets/javascripts/filtered_search/dropdown_user.js.es6

@@ -37,7 +37,7 @@
     }
 
     getSearchInput() {
-      const query = this.input.value.trim();
+      const query = gl.DropdownUtils.getSearchInput(this.input).trim();
       const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
 
       return lastToken.value || '';

app/assets/javascripts/filtered_search/dropdown_utils.js.es6

@@ -72,6 +72,18 @@
       // Return boolean based on whether it was set
       return dataValue !== null;
     }
+
+    static getSearchInput(filteredSearchInput) {
+      const selectionStart = filteredSearchInput.selectionStart;
+      const inputValue = filteredSearchInput.value;
+      const rightPos = inputValue.slice(selectionStart).search(/\s/);
+
+      if (rightPos < 0) {
+        return inputValue;
+      }
+
+      return inputValue.slice(0, rightPos + selectionStart + 1).trim();
+    }
   }
 
   window.gl = window.gl || {};

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6

@@ -64,7 +64,8 @@
       const input = document.querySelector('.filtered-search');
       const word = `${tokenName}:${tokenValue}`;
 
-      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value);
+      const inputValue = gl.DropdownUtils.getSearchInput(input).trim();
+      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(inputValue);
       const lastSearchToken = searchToken.split(' ').last();
       const lastInputCharacter = input.value[input.value.length - 1];
       const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1];
@@ -97,7 +98,7 @@
 
       const filterIconPadding = 27;
       const offset = gl.text
-        .getTextWidth(this.getSearchInput(), this.font) + filterIconPadding;
+        .getTextWidth(gl.DropdownUtils.getSearchInput(this.filteredSearchInput).trim(), this.font) + filterIconPadding;
 
       this.mapping[key].reference.setOffset(offset);
     }
@@ -153,7 +154,7 @@
 
     setDropdown() {
       const { lastToken, searchToken } = this.tokenizer
-        .processTokens(this.getSearchInput());
+        .processTokens(gl.DropdownUtils.getSearchInput(this.filteredSearchInput));
 
       if (this.filteredSearchInput.value.split('').last() === ' ') {
         this.updateCurrentDropdownOffset();
@@ -174,18 +175,6 @@
       }
     }
 
-    getSearchInput() {
-      const selectionStart = this.filteredSearchInput.selectionStart;
-      const inputValue = this.filteredSearchInput.value;
-      const rightPos = inputValue.slice(selectionStart).search(/\s/);
-
-      if (rightPos < 0) {
-        return inputValue;
-      }
-
-      return inputValue.slice(0, rightPos + selectionStart + 1).trim();
-    }
-
     resetDropdowns() {
       // Force current dropdown to hide
       this.mapping[this.currentDropdown].reference.hideDropdown();

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

@@ -30,12 +30,13 @@
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
       this.clearSearchWrapper = this.clearSearch.bind(this);
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+      this.showOnClick = this.showOnClick.bind(this);
 
       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.setDropdownWrapper);
+      this.filteredSearchInput.addEventListener('click', this.showOnClick);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
     }
 
@@ -44,6 +45,7 @@
       this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
       this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.removeEventListener('click', this.showOnClick);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
     }
 
@@ -86,6 +88,7 @@
 
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
+      const usernameParams = this.getUsernameParams();
       const inputValues = [];
 
       params.forEach((p) => {
@@ -116,6 +119,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);
           }
@@ -165,6 +178,26 @@
 
       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;
+    }
+
+    showOnClick() {
+      const currentDropdownRef = this.dropdownManager.mapping[this.dropdownManager.currentDropdown].reference;
+
+      this.setDropdownWrapper();
+      currentDropdownRef.dispatchInputEvent();
+    }
   }
 
   window.gl = window.gl || {};