From 86a3dee278e685d935e19bde64c3543e5e1437e5 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Tue, 7 Mar 2017 20:12:23 -0600
Subject: Prevent visual token dropdown from opening the wrong filter dropdown

---
 .../javascripts/filtered_search/dropdown_utils.js  | 54 ++++++++++++++--------
 .../filtered_search_dropdown_manager.js            |  2 +-
 .../filtered_search/filtered_search_manager.js     |  9 ++--
 3 files changed, 43 insertions(+), 22 deletions(-)

(limited to 'app/assets/javascripts')

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(' ');
     }
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index 608c65c78a4..e1a97070439 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -139,7 +139,7 @@
     }
 
     setDropdown() {
-      const query = gl.DropdownUtils.getSearchQuery();
+      const query = gl.DropdownUtils.getSearchQuery(true);
       const { lastToken, searchToken } = this.tokenizer.processTokens(query);
 
       if (this.currentDropdown) {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 58a984048de..638fe744668 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -363,10 +363,13 @@
 
     tokenChange() {
       const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
-      const currentDropdownRef = dropdown.reference;
 
-      this.setDropdownWrapper();
-      currentDropdownRef.dispatchInputEvent();
+      if (dropdown) {
+        const currentDropdownRef = dropdown.reference;
+
+        this.setDropdownWrapper();
+        currentDropdownRef.dispatchInputEvent();
+      }
     }
   }
 
-- 
cgit v1.2.1