Merge branch 'single-click-filter' into 'master'

Change from double click to single click to open dropdown

Closes #31757

See merge request !11943

2 files changed, 16 insertions, 26 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 3be889c684b..72214321be1 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -105,11 +105,9 @@ class FilteredSearchManager {
     this.filteredSearchInput.addEventListener('click', this.tokenChange);
     this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
     this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
-    this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
     this.tokensContainer.addEventListener('click', this.removeTokenWrapper);
-    this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
+    this.tokensContainer.addEventListener('click', this.editTokenWrapper);
     this.clearSearchButton.addEventListener('click', this.onClearSearchWrapper);
-    document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
     document.addEventListener('click', this.unselectEditTokensWrapper);
     document.addEventListener('click', this.removeInputContainerFocusWrapper);
     document.addEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
@@ -127,11 +125,9 @@ class FilteredSearchManager {
     this.filteredSearchInput.removeEventListener('click', this.tokenChange);
     this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
     this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
-    this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
     this.tokensContainer.removeEventListener('click', this.removeTokenWrapper);
-    this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
+    this.tokensContainer.removeEventListener('click', this.editTokenWrapper);
     this.clearSearchButton.removeEventListener('click', this.onClearSearchWrapper);
-    document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
     document.removeEventListener('click', this.unselectEditTokensWrapper);
     document.removeEventListener('click', this.removeInputContainerFocusWrapper);
     document.removeEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
@@ -207,23 +203,13 @@ class FilteredSearchManager {
     }
   }
 
-  static selectToken(e) {
-    const button = e.target.closest('.selectable');
-    const removeButtonSelected = e.target.closest('.remove-token');
-
-    if (!removeButtonSelected && button) {
-      e.preventDefault();
-      e.stopPropagation();
-      gl.FilteredSearchVisualTokens.selectToken(button);
-    }
-  }
-
   removeToken(e) {
     const removeButtonSelected = e.target.closest('.remove-token');
 
     if (removeButtonSelected) {
       e.preventDefault();
-      e.stopPropagation();
+      // Prevent editToken from being triggered after token is removed
+      e.stopImmediatePropagation();
 
       const button = e.target.closest('.selectable');
       gl.FilteredSearchVisualTokens.selectToken(button, true);
@@ -245,10 +231,12 @@ class FilteredSearchManager {
 
   editToken(e) {
     const token = e.target.closest('.js-visual-token');
-    const sanitizedTokenName = token.querySelector('.name').textContent.trim();
+    const sanitizedTokenName = token && token.querySelector('.name').textContent.trim();
     const canEdit = this.canEdit && this.canEdit(sanitizedTokenName);
 
     if (token && canEdit) {
+      e.preventDefault();
+      e.stopPropagation();
       gl.FilteredSearchVisualTokens.editToken(token);
       this.tokenChange();
     }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index acf5de0e3b5..cfbaaaa04c7 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -142,15 +142,17 @@
       }
     }
   }
+}
 
-  .selected {
-    .name {
-      background-color: $filter-name-selected-color;
-    }
+.filtered-search-token:hover,
+.filtered-search-token .selected,
+.filtered-search-term .selected {
+  .name {
+    background-color: $filter-name-selected-color;
+  }
 
-    .value-container {
-      background-color: $filter-value-selected-color;
-    }
+  .value-container {
+    background-color: $filter-value-selected-color;
   }
 }