Opens dropdown correctly

4 files changed, 27 insertions, 17 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6
index e80d266ae89..2e9e53458fb 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6
+++ b/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 || '';
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
index c27ef3042d1..07d257ad8d9 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
+++ b/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 || {};
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
index 1d5c3490f09..4577aa2c94e 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -59,7 +59,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];
@@ -92,7 +93,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);
     }
@@ -148,7 +149,7 @@
 
     setDropdown() {
       const { lastToken, searchToken } = this.tokenizer
-        .processTokens(this.getSearchInput());
+        .processTokens(gl.DropdownUtils.getSearchInput(this.filteredSearchInput));
 
       if (this.filteredSearchInput.value.split('').last() === ' ') {
         this.updateCurrentDropdownOffset();
@@ -169,18 +170,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();
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 ca8a185a102..12b8cb4b4b1 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/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);
     }
 
@@ -189,6 +191,13 @@
       }
       return usernamesById;
     }
+
+    showOnClick() {
+      const currentDropdownRef = this.dropdownManager.mapping[this.dropdownManager.currentDropdown].reference;
+
+      this.setDropdownWrapper();
+      currentDropdownRef.dispatchInputEvent();
+    }
   }
 
   window.gl = window.gl || {};