Fix filtered search visual token editing dropdownfix-fs-edit-dropdown

2 files changed, 21 insertions, 3 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 4b5f9618d65..58a984048de 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -35,6 +35,7 @@
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
       this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
       this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
+      this.editTokenWrapper = this.editToken.bind(this);
       this.tokenChange = this.tokenChange.bind(this);
 
       this.filteredSearchInput.form.addEventListener('submit', this.handleFormSubmit);
@@ -47,7 +48,7 @@
       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.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
       document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.addEventListener('click', this.unselectEditTokensWrapper);
@@ -65,7 +66,7 @@
       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.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
       document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.removeEventListener('click', this.unselectEditTokensWrapper);
@@ -134,11 +135,12 @@
       }
     }
 
-    static editToken(e) {
+    editToken(e) {
       const token = e.target.closest('.js-visual-token');
 
       if (token) {
         gl.FilteredSearchVisualTokens.editToken(token);
+        this.tokenChange();
       }
     }
 
diff --git a/spec/features/issues/filtered_search/visual_tokens_spec.rb b/spec/features/issues/filtered_search/visual_tokens_spec.rb
index b62a6d7913d..a78dbaf53ed 100644
--- a/spec/features/issues/filtered_search/visual_tokens_spec.rb
+++ b/spec/features/issues/filtered_search/visual_tokens_spec.rb
@@ -226,6 +226,22 @@ describe 'Visual tokens', js: true, feature: true do
     end
   end
 
+  describe 'editing multiple tokens' do
+    before do
+      input_filtered_search('author:@root assignee:none', submit: false)
+      first('.tokens-container .filtered-search-token').double_click
+    end
+
+    it 'opens author dropdown' do
+      expect(page).to have_css('#js-dropdown-author', visible: true)
+    end
+
+    it 'opens assignee dropdown' do
+      find('.tokens-container .filtered-search-token', text: 'Assignee').double_click
+      expect(page).to have_css('#js-dropdown-assignee', visible: true)
+    end
+  end
+
   describe 'add new token after editing existing token' do
     before do
       input_filtered_search('author:@root assignee:none', submit: false)