Merge branch 'issue-filter-click-to-search' into 'master'

Allow issue filter submission using mouse only

See merge request !8681

4 files changed, 28 insertions, 2 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
index f4ec3b206cc..7d297b8eee8 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -20,6 +20,9 @@
       if (selected.tagName === 'LI') {
         if (selected.hasAttribute('data-value')) {
           this.dismissDropdown();
+        } else if (selected.getAttribute('data-action') === 'submit') {
+          this.dismissDropdown();
+          this.dispatchFormSubmitEvent();
         } else {
           const token = selected.querySelector('.js-filter-hint').innerText.trim();
           const tag = selected.querySelector('.js-filter-tag').innerText.trim();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index 9128ea907b3..859d6515531 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -39,6 +39,7 @@
         }
 
         this.dismissDropdown();
+        this.dispatchInputEvent();
       }
     }
 
@@ -84,6 +85,12 @@
       }));
     }
 
+    dispatchFormSubmitEvent() {
+      // dispatchEvent() is necessary as form.submit() does not
+      // trigger event handlers
+      this.input.form.dispatchEvent(new Event('submit'));
+    }
+
     hideDropdown() {
       this.getCurrentHook().list.hide();
     }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
index 408a0dfd768..00e1c28692f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -61,11 +61,19 @@
       const word = `${tokenName}:${tokenValue}`;
 
       // Get the string to replace
-      const selectionStart = input.selectionStart;
+      let newCaretPosition = input.selectionStart;
       const { left, right } = gl.DropdownUtils.getInputSelectionPosition(input);
 
       input.value = `${inputValue.substr(0, left)}${word}${inputValue.substr(right)}`;
-      gl.FilteredSearchDropdownManager.updateInputCaretPosition(selectionStart, input);
+
+      // If we have added a tokenValue at the end of the input,
+      // add a space and set selection to the end
+      if (right >= inputValue.length && tokenValue !== '') {
+        input.value += ' ';
+        newCaretPosition = input.value.length;
+      }
+
+      gl.FilteredSearchDropdownManager.updateInputCaretPosition(newCaretPosition, input);
     }
 
     static updateInputCaretPosition(selectionStart, input) {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index c7b72b36561..ae19bb68360 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -25,6 +25,7 @@
     }
 
     bindEvents() {
+      this.handleFormSubmit = this.handleFormSubmit.bind(this);
       this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
       this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
@@ -32,6 +33,7 @@
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
       this.tokenChange = this.tokenChange.bind(this);
 
+      this.filteredSearchInput.form.addEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
@@ -42,6 +44,7 @@
     }
 
     unbindEvents() {
+      this.filteredSearchInput.form.removeEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
@@ -88,6 +91,11 @@
       this.dropdownManager.resetDropdowns();
     }
 
+    handleFormSubmit(e) {
+      e.preventDefault();
+      this.search();
+    }
+
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
       const usernameParams = this.getUsernameParams();