1 files changed, 17 insertions, 1 deletions
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
index 9e92d544bef..1e69178c746 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -28,6 +28,22 @@ require('./filtered_search_dropdown');
           const tag = selected.querySelector('.js-filter-tag').innerText.trim();
 
           if (tag.length) {
+            // Get previous input values in the input field and convert them into visual tokens
+            const previousInputValues = this.input.value.split(' ');
+            const searchTerms = [];
+
+            previousInputValues.forEach((value, index) => {
+              searchTerms.push(value);
+
+              if (index === previousInputValues.length - 1 && token.indexOf(value) !== -1) {
+                searchTerms.pop();
+              }
+            });
+
+            if (searchTerms.length > 0) {
+              gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
+            }
+
             gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''));
           }
           this.dismissDropdown();
@@ -39,7 +55,7 @@ require('./filtered_search_dropdown');
     renderContent() {
       const dropdownData = [];
 
-      [].forEach.call(this.input.parentElement.querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+      [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
         const { icon, hint, tag } = dropdownMenu.dataset;
         if (icon && hint && tag) {
           dropdownData.push({