From ee621d0b413d38cb8f306174defabcd78f145810 Mon Sep 17 00:00:00 2001
From: Lukas Olson <olson.lukas@gmail.com>
Date: Wed, 1 Jul 2020 11:34:32 -0700
Subject: [PATCH] Update KQL/filter bar suggestions to cancel when navigating
 away (#69769)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../ui/filter_bar/filter_editor/phrase_suggestor.tsx      | 8 ++++++++
 .../public/ui/query_string_input/query_string_input.tsx   | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_suggestor.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_suggestor.tsx
index 8e8054ac204d9..719827a98cc63 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_suggestor.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_suggestor.tsx
@@ -45,6 +45,7 @@ export class PhraseSuggestorUI<T extends PhraseSuggestorProps> extends React.Com
   PhraseSuggestorState
 > {
   private services = this.props.kibana.services;
+  private abortController?: AbortController;
   public state: PhraseSuggestorState = {
     suggestions: [],
     isLoading: false,
@@ -54,6 +55,10 @@ export class PhraseSuggestorUI<T extends PhraseSuggestorProps> extends React.Com
     this.updateSuggestions();
   }
 
+  public componentWillUnmount() {
+    if (this.abortController) this.abortController.abort();
+  }
+
   protected isSuggestingValues() {
     const shouldSuggestValues = this.services.uiSettings.get(
       UI_SETTINGS.FILTERS_EDITOR_SUGGEST_VALUES
@@ -67,6 +72,8 @@ export class PhraseSuggestorUI<T extends PhraseSuggestorProps> extends React.Com
   };
 
   protected updateSuggestions = debounce(async (query: string = '') => {
+    if (this.abortController) this.abortController.abort();
+    this.abortController = new AbortController();
     const { indexPattern, field } = this.props as PhraseSuggestorProps;
     if (!field || !this.isSuggestingValues()) {
       return;
@@ -77,6 +84,7 @@ export class PhraseSuggestorUI<T extends PhraseSuggestorProps> extends React.Com
       indexPattern,
       field,
       query,
+      signal: this.abortController.signal,
     });
 
     this.setState({ suggestions, isLoading: false });
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index 32295745ce217..120bbf3b68f7b 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -95,7 +95,7 @@ export class QueryStringInputUI extends Component<Props, State> {
   public inputRef: HTMLInputElement | null = null;
 
   private persistedLog: PersistedLog | undefined;
-  private abortController: AbortController | undefined;
+  private abortController?: AbortController;
   private services = this.props.kibana.services;
   private componentIsUnmounting = false;
 
@@ -497,6 +497,7 @@ export class QueryStringInputUI extends Component<Props, State> {
   }
 
   public componentWillUnmount() {
+    if (this.abortController) this.abortController.abort();
     this.updateSuggestions.cancel();
     this.componentIsUnmounting = true;
   }