Fix query input lag (elastic#21753) (elastic#21883)

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

@@ -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()"

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