From e101fcd4141d676a0a4f363ea34da33fe14957e6 Mon Sep 17 00:00:00 2001
From: Matt Bargar <mbargar@gmail.com>
Date: Fri, 10 Aug 2018 11:18:44 -0400
Subject: [PATCH] Fix query input lag (#21753)

The debounce in ng-model-options was intended to avoid updating the
typeahead suggestions too often. It had the side effect of delaying
query input updates to the model on the angular scope. As a result, if
you typed quickly and hit enter within 100ms, you would submit an out of
date query. This moves the debounce from ng-model-options to the
updateSuggestions method itself.
---
 src/ui/public/query_bar/directive/query_bar.html |  1 -
 src/ui/public/query_bar/directive/query_bar.js   | 15 +++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html
index 19615afe77192..e8205825ff53a 100644
--- a/src/ui/public/query_bar/directive/query_bar.html
+++ b/src/ui/public/query_bar/directive/query_bar.html
@@ -42,7 +42,6 @@
         <input
           ng-if="queryBar.localQuery.language === 'kuery'"
           ng-model="queryBar.localQuery.query"
-          ng-model-options="{ debounce: 100 }"
           ng-trim="false"
           ng-keydown="queryBar.handleKeyDown($event)"
           ng-change="queryBar.updateSuggestions()"
diff --git a/src/ui/public/query_bar/directive/query_bar.js b/src/ui/public/query_bar/directive/query_bar.js
index 97bc94ac6881c..7179c1294afe6 100644
--- a/src/ui/public/query_bar/directive/query_bar.js
+++ b/src/ui/public/query_bar/directive/query_bar.js
@@ -45,7 +45,7 @@ module.directive('queryBar', function () {
     controllerAs: 'queryBar',
     bindToController: true,
 
-    controller: callAfterBindingsWorkaround(function ($scope, $element, $http, $timeout, config, PersistedLog, indexPatterns) {
+    controller: callAfterBindingsWorkaround(function ($scope, $element, $http, $timeout, config, PersistedLog, indexPatterns, debounce) {
       this.appName = this.appName || 'global';
       this.focusedTypeaheadItemID = '';
 
@@ -76,10 +76,12 @@ module.directive('queryBar', function () {
         }
       };
 
-      this.updateSuggestions = async () => {
+      this.updateSuggestions = debounce(async () => {
         const suggestions = await this.getSuggestions();
-        $scope.$apply(() => this.suggestions = suggestions);
-      };
+        if (!this._isScopeDestroyed) {
+          $scope.$apply(() => this.suggestions = suggestions);
+        }
+      }, 100);
 
       this.getSuggestions = async () => {
         const { localQuery: { query, language } } = this;
@@ -144,6 +146,11 @@ module.directive('queryBar', function () {
       $scope.$watch('queryBar.indexPatterns', () => {
         this.updateSuggestions();
       });
+
+      $scope.$on('$destroy', () => {
+        this.updateSuggestions.cancel();
+        this._isScopeDestroyed = true;
+      });
     })
   };
 });