fix placeholder for locked tokens in filtered search39499-filtered-placeholder

2 files changed, 23 insertions, 7 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 8d711e3213c..c61d9987837 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -147,6 +147,22 @@ class DropdownUtils {
     return dataValue !== null;
   }
 
+  static showPlaceholderText() {
+    const container = FilteredSearchContainer.container;
+
+    const textInput = container.querySelector('.filtered-search');
+    if (textInput && textInput.value) {
+      return false;
+    }
+
+    const tokens = [].slice.call(container.querySelectorAll('.tokens-container .filtered-search-token'));
+    if (tokens.find(token => !token.firstElementChild.classList.contains('hidden'))) {
+      return false;
+    }
+
+    return true;
+  }
+
   // Determines the full search query (visual tokens + input)
   static getSearchQuery(untilInput = false) {
     const container = FilteredSearchContainer.container;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 7b233842d5a..f0894924814 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -284,25 +284,25 @@ class FilteredSearchManager {
   }
 
   toggleClearSearchButton() {
-    const query = gl.DropdownUtils.getSearchQuery();
+    const showPlaceholderText = gl.DropdownUtils.showPlaceholderText();
     const hidden = 'hidden';
-    const hasHidden = this.clearSearchButton.classList.contains(hidden);
+    const isHidden = this.clearSearchButton.classList.contains(hidden);
 
-    if (query.length === 0 && !hasHidden) {
+    if (showPlaceholderText && !isHidden) {
       this.clearSearchButton.classList.add(hidden);
-    } else if (query.length && hasHidden) {
+    } else if (!showPlaceholderText && isHidden) {
       this.clearSearchButton.classList.remove(hidden);
     }
   }
 
   handleInputPlaceholder() {
-    const query = gl.DropdownUtils.getSearchQuery();
+    const showPlaceholderText = gl.DropdownUtils.showPlaceholderText();
     const placeholder = 'Search or filter results...';
     const currentPlaceholder = this.filteredSearchInput.placeholder;
 
-    if (query.length === 0 && currentPlaceholder !== placeholder) {
+    if (showPlaceholderText && currentPlaceholder !== placeholder) {
       this.filteredSearchInput.placeholder = placeholder;
-    } else if (query.length > 0 && currentPlaceholder !== '') {
+    } else if (!showPlaceholderText && currentPlaceholder !== '') {
       this.filteredSearchInput.placeholder = '';
     }
   }