Update KQL/filter bar suggestions to cancel when navigating away

elastic · Jun 23, 2020 · 61ef4b3 · 61ef4b3
1 parent b2d3833
commit 61ef4b3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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;
   }