1 files changed, 40 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 935daf3199b..9e6692e3d21 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -34,6 +34,7 @@
       this.clearSearchWrapper = this.clearSearch.bind(this);
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
       this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
+      this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
       this.tokenChange = this.tokenChange.bind(this);
 
       this.filteredSearchInput.form.addEventListener('submit', this.handleFormSubmit);
@@ -46,8 +47,10 @@
       this.filteredSearchInput.addEventListener('click', this.tokenChange);
       this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
       this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
+      this.tokensContainer.addEventListener('dblclick', FilteredSearchManager.editToken);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
       document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
+      document.addEventListener('click', this.unselectEditTokensWrapper);
       document.addEventListener('keydown', this.removeSelectedTokenWrapper);
     }
 
@@ -62,8 +65,10 @@
       this.filteredSearchInput.removeEventListener('click', this.tokenChange);
       this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
       this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
+      this.tokensContainer.removeEventListener('dblclick', FilteredSearchManager.editToken);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
       document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
+      document.removeEventListener('click', this.unselectEditTokensWrapper);
       document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
     }
 
@@ -71,7 +76,7 @@
       // 8 = Backspace Key
       // 46 = Delete Key
       if (e.keyCode === 8 || e.keyCode === 46) {
-        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualToken();
+        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
         if (this.filteredSearchInput.value === '' && lastVisualToken) {
           this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
@@ -117,6 +122,26 @@
       }
     }
 
+    unselectEditTokens(e) {
+      const inputContainer = document.querySelector('.filtered-search-input-container');
+      const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
+      const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
+      const isElementScrollContainer = e.target.classList.contains('scroll-container');
+
+      if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementScrollContainer) {
+        gl.FilteredSearchVisualTokens.moveInputToTheRight();
+        this.dropdownManager.resetDropdowns();
+      }
+    }
+
+    static editToken(e) {
+      const token = e.target.closest('.js-visual-token');
+
+      if (token) {
+        gl.FilteredSearchVisualTokens.editToken(token);
+      }
+    }
+
     toggleClearSearchButton() {
       const query = gl.DropdownUtils.getSearchQuery();
       const hidden = 'hidden';
@@ -155,7 +180,19 @@
       e.preventDefault();
 
       this.filteredSearchInput.value = '';
-      this.filteredSearchInput.parentElement.querySelector('.tokens-container').innerHTML = '';
+
+      const removeElements = [];
+
+      [].forEach.call(this.tokensContainer.children, (t) => {
+        if (t.classList.contains('js-visual-token')) {
+          removeElements.push(t);
+        }
+      });
+
+      removeElements.forEach((el) => {
+        el.parentElement.removeChild(el);
+      });
+
       this.clearSearchButton.classList.add('hidden');
       this.handleInputPlaceholder();
 
@@ -167,7 +204,7 @@
       const { tokens, searchToken }
         = gl.FilteredSearchTokenizer.processTokens(input.value);
       const { isLastVisualTokenValid }
-        = gl.FilteredSearchVisualTokens.getLastVisualToken();
+        = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
       if (isLastVisualTokenValid) {
         tokens.forEach((t) => {