Fix query input lag

[Bargs]

Fixes #20486

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.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[timroes]

I can confirm this fixes the bug. There is a minor "issue" with the code. If you navigate really fast away from the page while the debounce is still running we'll still trigger a debounce even while we are already on a separate page. Since the debounced function then access the already destroyed scope (calling $apply) on it, I am not sure what the outcome is. To make this 100% safe, we would need to cancel the debounce if the scope gets destroyed and since there is another async operation in the debounce, also check after that again if we are still "alive":

this.updateSuggestions = debounce(async () => {
  const suggestions = await this.getSuggestions();
  if (!this._destroyed) {
    $scope.$apply(() => this.suggestions = suggestions);
  }
});

$scope.$on('$destroy', () => {
  this.updateSuggestions.cancel();
  this._destroyed = true;
});

I know that code usually is super ugly to read, but also these issues are super hard to detect later on in case they appear, why I think even with a small debounce of 100ms we should rather go for safe cod. We actually hit that issue a couple of times with our render debounce, that is also at 100ms.

[Bargs]

Good point @timroes, I've made the update you suggested.

[timroes]

I can confirm, that the reported issue is fixed by this. Code looks also good to me.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request