Prevent visual token dropdown from opening the wrong filter dropdown

1 files changed, 36 insertions, 18 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index b52081df646..a5a6b56a0d3 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -80,30 +80,48 @@
     }
 
     // Determines the full search query (visual tokens + input)
-    static getSearchQuery() {
-      const tokensContainer = document.querySelector('.tokens-container');
+    static getSearchQuery(untilInput = false) {
+      const tokens = [].slice.call(document.querySelectorAll('.tokens-container li'));
       const values = [];
 
-      [].forEach.call(tokensContainer.querySelectorAll('.js-visual-token'), (token) => {
-        const name = token.querySelector('.name');
-        const value = token.querySelector('.value');
-        const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
-        let valueText = '';
+      if (untilInput) {
+        const inputIndex = _.findIndex(tokens, t => t.classList.contains('input-token'));
+        // Add one to include input-token to the tokens array
+        tokens.splice(inputIndex + 1);
+      }
 
-        if (value && value.innerText) {
-          valueText = value.innerText;
-        }
-
-        if (token.className.indexOf('filtered-search-token') !== -1) {
-          values.push(`${name.innerText.toLowerCase()}:${symbol}${valueText}`);
-        } else {
-          values.push(name.innerText);
+      tokens.forEach((token) => {
+        if (token.classList.contains('js-visual-token')) {
+          const name = token.querySelector('.name');
+          const value = token.querySelector('.value');
+          const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
+          let valueText = '';
+
+          if (value && value.innerText) {
+            valueText = value.innerText;
+          }
+
+          if (token.className.indexOf('filtered-search-token') !== -1) {
+            values.push(`${name.innerText.toLowerCase()}:${symbol}${valueText}`);
+          } else {
+            values.push(name.innerText);
+          }
+        } else if (token.classList.contains('input-token')) {
+          const { isLastVisualTokenValid } =
+            gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+          const input = document.querySelector('.filtered-search');
+          const inputValue = input && input.value;
+
+          if (isLastVisualTokenValid) {
+            values.push(inputValue);
+          } else {
+            const previous = values.pop();
+            values.push(`${previous}${inputValue}`);
+          }
         }
       });
 
-      const input = document.querySelector('.filtered-search');
-      values.push(input && input.value);
-
       return values.join(' ');
     }