1 files changed, 15 insertions, 0 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 081c2fa9aeb..d216fff07e3 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -3,6 +3,7 @@
     constructor(page) {
       this.filteredSearchInput = document.querySelector('.filtered-search');
       this.clearSearchButton = document.querySelector('.clear-search');
+      this.tokensContainer = document.querySelector('.tokens-container');
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
       if (this.filteredSearchInput) {
@@ -43,7 +44,9 @@
       this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
       this.filteredSearchInput.addEventListener('click', this.tokenChange);
       this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
+      this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+      document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
     }
 
     unbindEvents() {
@@ -56,7 +59,9 @@
       this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
       this.filteredSearchInput.removeEventListener('click', this.tokenChange);
       this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
+      this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+      document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
     }
 
     checkForBackspace(e) {
@@ -99,6 +104,16 @@
       }
     }
 
+    static selectToken(e) {
+      const button = e.target.closest('.selectable');
+
+      if (button) {
+        e.preventDefault();
+        e.stopPropagation();
+        gl.FilteredSearchVisualTokens.selectToken(button);
+      }
+    }
+
     toggleClearSearchButton() {
       const query = gl.DropdownUtils.getSearchQuery();
       const hidden = 'hidden';