Filtered search input click back at token

Allows the user to click back around the filtered search input to change the previously searched terms

2 files changed, 15 insertions, 2 deletions

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 1cd0483877a..1d5c3490f09 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
@@ -92,7 +92,7 @@
 
       const filterIconPadding = 27;
       const offset = gl.text
-        .getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
+        .getTextWidth(this.getSearchInput(), this.font) + filterIconPadding;
 
       this.mapping[key].reference.setOffset(offset);
     }
@@ -148,7 +148,7 @@
 
     setDropdown() {
       const { lastToken, searchToken } = this.tokenizer
-        .processTokens(this.filteredSearchInput.value);
+        .processTokens(this.getSearchInput());
 
       if (this.filteredSearchInput.value.split('').last() === ' ') {
         this.updateCurrentDropdownOffset();
@@ -169,6 +169,18 @@
       }
     }
 
+    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 4e8a7cfc940..ca8a185a102 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -35,6 +35,7 @@
       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.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
     }