Increase debounce wait on issues search execution.

2 files changed, 40 insertions, 3 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 970f88b9fa7..f029c8a94fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -100,6 +100,7 @@ Please view this file on the master branch, on stable branches it's out of date.
   - Add RTL support to markdown renderer (Ebrahim Byagowi)
   - Add word-wrap to issue title on issue and milestone boards (ClemMakesApps)
   - Fix todos page mobile viewport layout (ClemMakesApps)
+  - Make issues search less finicky
   - Fix inconsistent highlighting of already selected activity nav-links (ClemMakesApps)
   - Remove redundant mixins (ClemMakesApps)
   - Added 'Download' button to the Snippets page (Justin DiPierro)
diff --git a/app/assets/javascripts/issuable.js.es6 b/app/assets/javascripts/issuable.js.es6
index 57f7e4ef230..25f98ef8689 100644
--- a/app/assets/javascripts/issuable.js.es6
+++ b/app/assets/javascripts/issuable.js.es6
@@ -15,16 +15,47 @@
       return Issuable.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
     },
     initSearch: function() {
+      const $searchInput = $('#issuable_search');
+
+      Issuable.initSearchState($searchInput);
+
       // `immediate` param set to false debounces on the `trailing` edge, lets user finish typing
-      const debouncedExecSearch = _.debounce(Issuable.executeSearch, 500, false);
+      const debouncedExecSearch = _.debounce(Issuable.executeSearch, 1000, false);
 
-      $('#issuable_search').off('keyup').on('keyup', debouncedExecSearch);
+      $searchInput.off('keyup').on('keyup', debouncedExecSearch);
 
       // ensures existing filters are preserved when manually submitted
-      $('#issue_search_form').on('submit', (e) => {
+      $('#issuable_search_form').on('submit', (e) => {
         e.preventDefault();
         debouncedExecSearch(e);
       });
+
+    },
+    initSearchState: function($searchInput) {
+      const currentSearchVal = $searchInput.val();
+
+      Issuable.searchState = {
+        elem: $searchInput,
+        current: currentSearchVal
+      };
+
+      Issuable.maybeFocusOnSearch();
+    },
+    accessSearchPristine: function(set) {
+      // store reference to previous value to prevent search on non-mutating keyup
+      const state = Issuable.searchState;
+      const currentSearchVal = state.elem.val();
+
+      if (set) {
+        state.current = currentSearchVal;
+      } else {
+        return state.current === currentSearchVal;
+      }
+    },
+    maybeFocusOnSearch: function() {
+      if (Issuable.searchState.current !== '') {
+        Issuable.searchState.elem.focus();
+      }
     },
     executeSearch: function(e) {
       const $search = $('#issuable_search');
@@ -32,6 +63,11 @@
       const $searchValue = $search.val();
       const $filtersForm = $('.js-filter-form');
       const $input = $(`input[name='${$searchName}']`, $filtersForm);
+      const isPristine = Issuable.accessSearchPristine();
+
+      if (isPristine) {
+        return;
+      }
 
       if (!$input.length) {
         $filtersForm.append(`<input type='hidden' name='${$searchName}' value='${_.escape($searchValue)}'/>`);