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

Allow issue filter submission using mouse only

See merge request !8681

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();

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();
     }

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) {

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();

app/views/shared/issuable/_search_bar.html.haml

@@ -17,7 +17,7 @@
             = icon('times')
           #js-dropdown-hint.dropdown-menu.hint-dropdown
             %ul{ 'data-dropdown' => true }
-              %li.filter-dropdown-item{ 'data-value' => '' }
+              %li.filter-dropdown-item{ 'data-action' => 'submit' }
                 %button.btn.btn-link
                   = icon('search')
                   %span
@@ -125,10 +125,6 @@
   new MilestoneSelect();
   new IssueStatusSelect();
   new SubscriptionSelect();
-  $('form.filter-form').on('submit', function (event) {
-    event.preventDefault();
-    Turbolinks.visit(this.action + '&' + $(this).serialize());
-  });
 
   $(document).off('page:restore').on('page:restore', function (event) {
     if (gl.FilteredSearchManager) {

changelogs/unreleased/issue-filter-click-to-search.yml

@@ -0,0 +1,4 @@
+---
+title: allow issue filter bar to be operated with mouse only
+merge_request: 8681
+author: