Refactor addWordToInput

6 files changed, 33 insertions, 33 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
index c5ab9c52d76..f1e317d91cc 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -4,8 +4,8 @@
 
 (() => {
   class DropdownHint extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input) {
-      super(droplab, dropdown, input);
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
       this.config = {
         droplabFilter: {
           template: 'hint',
@@ -25,7 +25,7 @@
           const tag = selected.querySelector('.js-filter-tag').innerText.trim();
 
           if (tag.length) {
-            gl.FilteredSearchDropdownManager.addWordToInput(token);
+            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''));
           }
           this.dismissDropdown();
           this.dispatchInputEvent();
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6
index 54090375c5c..f06c3fc9c6f 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6
@@ -5,8 +5,8 @@
 
 (() => {
   class DropdownNonUser extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input, endpoint, symbol) {
-      super(droplab, dropdown, input);
+    constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+      super(droplab, dropdown, input, filter);
       this.symbol = symbol;
       this.config = {
         droplabAjax: {
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6
index 49581e3bfbd..e80d266ae89 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6
@@ -4,8 +4,8 @@
 
 (() => {
   class DropdownUser extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input) {
-      super(droplab, dropdown, input);
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
       this.config = {
         droplabAjaxFilter: {
           endpoint: '/autocomplete/users.json',
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
index 3453311bee5..88b172d6fc4 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6
@@ -58,11 +58,11 @@
       return updatedItem;
     }
 
-    static setDataValueIfSelected(selected) {
+    static setDataValueIfSelected(filter, selected) {
       const dataValue = selected.getAttribute('data-value');
 
       if (dataValue) {
-        gl.FilteredSearchDropdownManager.addWordToInput(dataValue);
+        gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue);
       }
 
       // Return boolean based on whether it was set
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index 56147ad93c9..886d8113f4a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -2,10 +2,11 @@
   const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
 
   class FilteredSearchDropdown {
-    constructor(droplab, dropdown, input) {
+    constructor(droplab, dropdown, input, filter) {
       this.droplab = droplab;
       this.hookId = input.getAttribute('data-id');
       this.input = input;
+      this.filter = filter;
       this.dropdown = dropdown;
       this.loadingTemplate = `<div class="filter-dropdown-loading">
         <i class="fa fa-spinner fa-spin"></i>
@@ -30,11 +31,11 @@
       const { selected } = e.detail;
 
       if (selected.tagName === 'LI' && selected.innerHTML) {
-        const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(selected);
+        const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
 
         if (!dataValueSet) {
           const value = getValueFunction(selected);
-          gl.FilteredSearchDropdownManager.addWordToInput(value);
+          gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value);
         }
 
         this.dismissDropdown();
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 e9f1fbf63ed..8b385d6b642 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
@@ -55,31 +55,30 @@
       };
     }
 
-    static addWordToInput(word, addSpace = false) {
+    static addWordToInput(tokenName, tokenValue = '') {
       const input = document.querySelector('.filtered-search');
-      input.value = input.value.trim();
+      const word = `${tokenName}:${tokenValue}`;
 
-      const value = input.value;
-      const hasExistingValue = value.length !== 0;
-      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(value);
+      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value);
       const lastSearchToken = searchToken.split(' ').last();
-
-      // Find out what part of the token value the user has typed
-      // and remove it from input before appending the selected token value
-      if (lastToken !== searchToken) {
-        const lastTokenString = `${lastToken.symbol}${lastToken.value}`;
-
-        // Spaces inside the token means that the token value will be escaped by quotes
-        const hasQuotes = lastTokenString.indexOf(' ') !== -1;
-
-        // Add 2 length to account for the length of the front and back quotes
-        const lengthToRemove = hasQuotes ? lastTokenString.length + 2 : lastTokenString.length;
-        input.value = value.slice(0, -1 * (lengthToRemove));
-      } else if (searchToken !== '' && word.indexOf(lastSearchToken) !== -1) {
-        input.value = value.slice(0, -1 * lastSearchToken.length);
+      const lastInputCharacter = input.value[input.value.length - 1];
+      const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1];
+
+      // Remove the typed tokenName
+      if (word.indexOf(lastSearchToken) === 0 && searchToken !== '') {
+        // Remove spaces after the colon
+        if (lastInputCharacter === ' ' && lastInputTrimmedCharacter === ':') {
+          input.value = input.value.trim();
+        }
+
+        input.value = input.value.slice(0, -1 * lastSearchToken.length);
+      } else if (lastInputCharacter !== ' ') {
+        // Remove the existing tokenValue
+        const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`;
+        input.value = input.value.slice(0, -1 * lastTokenString.length);
       }
 
-      input.value += hasExistingValue && addSpace ? ` ${word}` : word;
+      input.value += word;
     }
 
     updateCurrentDropdownOffset() {
@@ -106,7 +105,7 @@
 
       if (!mappingKey.reference) {
         const dl = this.droplab;
-        const defaultArguments = [null, dl, element, this.filteredSearchInput];
+        const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
         const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
 
         // Passing glArguments to `new gl[glClass](<arguments>)`