Trigger filter on click

1 files changed, 11 insertions, 4 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 b0cabf9d378..f1912a83e81 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -30,13 +30,14 @@
       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.tokenChange = this.tokenChange.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.showOnClick);
+      this.filteredSearchInput.addEventListener('click', this.tokenChange);
+      this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
     }
 
@@ -45,7 +46,8 @@
       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.filteredSearchInput.removeEventListener('click', this.tokenChange);
+      this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
     }
 
@@ -192,12 +194,17 @@
       return usernamesById;
     }
 
-    showOnClick() {
+    tokenChange(e) {
       const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
       const currentDropdownRef = dropdown.reference;
 
       this.setDropdownWrapper();
       currentDropdownRef.dispatchInputEvent();
+
+      if (e.type === 'click') {
+        // If click event, we need to trigger filter
+        this.filteredSearchInput.dispatchEvent(new Event('keyup'));
+      }
     }
   }