Fix: autocomplete-onfocusout (#855)

microsoftgraph · Feb 23, 2021 · e80af0b · e80af0b
1 parent e31cc2c
commit e80af0b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 45 deletions.
diff --git a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx b/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx
@@ -13,15 +13,13 @@ import { sanitizeQueryUrl } from '../../../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../../../utils/sample-url-generation';
 import { translateMessage } from '../../../../utils/translate-messages';
 import { queryInputStyles } from '../QueryInput.styles';
-
-
 import {
   cleanUpSelectedSuggestion, getLastCharacterOf,
+  getLastSymbolInUrl,
   getParametersWithVerb
 } from './auto-complete.util';
 import SuggestionsList from './SuggestionsList';
 
-
 class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
   private autoCompleteRef: React.RefObject<ITextField>;
 
@@ -53,7 +51,7 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
     }, 10);
   }
 
-  public onBlur = (e: any) => {
+  public updateUrlContent = (e: any) => {
     const userInput = e.target.value;
     this.props.contentChanged(userInput);
   };
@@ -73,7 +71,7 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
     this.initialiseAutoComplete(userInput);
   };
 
-  public onClick = (e: any) => {
+  public selectSuggestion = (e: any) => {
     const selected = e.currentTarget.innerText;
     this.appendSuggestionToUrl(selected);
   };
@@ -165,7 +163,7 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
     const controlPeriod = event.ctrlKey && event.keyCode === KeyCodes.period;
     if (controlSpace || controlPeriod) {
       const userInput = event.target.value;
-      const lastSymbol = this.getLastSymbolInUrl(userInput);
+      const lastSymbol = getLastSymbolInUrl(userInput);
       const previousUserInput = userInput.substring(0, lastSymbol.value + 1);
       if (lastSymbol.key === '/' || lastSymbol.key === '?') {
         const compare = userInput.replace(previousUserInput, '');
@@ -367,42 +365,15 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
     return null;
   }
 
-  private getLastSymbolInUrl(url: string) {
-    const availableSymbols = [
-      {
-        key: '/',
-        value: 0
-      },
-      {
-        key: ',',
-        value: 0
-      },
-      {
-        key: '$',
-        value: 0
-      },
-      {
-        key: '=',
-        value: 0
-      },
-      {
-        key: '&',
-        value: 0
-      },
-      {
-        key: '?',
-        value: 0
-      }
-    ];
-
-    availableSymbols.forEach(element => {
-      element.value = url.lastIndexOf(element.key);
-    });
-    const max = availableSymbols.reduce((prev, current) => (prev.value > current.value) ? prev : current);
-    return max;
+  closeSuggestionDialog = (event: any) => {
+    const { currentTarget, relatedTarget } = event;
+    if (!currentTarget.contains(relatedTarget as Node) && this.state.showSuggestions) {
+      this.setState({
+        showSuggestions: false
+      })
+    }
   }
 
-
   public render() {
     const {
       activeSuggestion,
@@ -418,13 +389,13 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
     }: any = queryInputStyles(currentTheme).autoComplete;
 
     return (
-      <>
+      <div onBlur={this.closeSuggestionDialog}>
         <TextField
           className={autoInput}
           type='text'
           autoComplete='off'
           onChange={this.onChange}
-          onBlur={this.onBlur}
+          onBlur={this.updateUrlContent}
           onKeyDown={this.onKeyDown}
           value={queryUrl}
           componentRef={this.autoCompleteRef}
@@ -436,8 +407,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
           <SuggestionsList
             filteredSuggestions={filteredSuggestions}
             activeSuggestion={activeSuggestion}
-            onClick={(e: any) => this.onClick(e)} />}
-      </>
+            onClick={(e: any) => this.selectSuggestion(e)} />}
+      </div>
     );
   }
 }

diff --git a/src/app/views/query-runner/query-input/auto-complete/SuggestionsList.tsx b/src/app/views/query-runner/query-input/auto-complete/SuggestionsList.tsx
@@ -26,7 +26,7 @@ const SuggestionsList = (props: any) => {
   }, [activeSuggestion]);
 
   return (
-    <ul className={classes.suggestions} aria-haspopup='true'>
+    <ul className={classes.suggestions} tabIndex={-1}>
       {filteredSuggestions.map((suggestion: {} | null | undefined, index: number) => {
         return (
           <li

diff --git a/src/app/views/query-runner/query-input/auto-complete/auto-complete.util.ts b/src/app/views/query-runner/query-input/auto-complete/auto-complete.util.ts
@@ -27,4 +27,39 @@ export function getParametersWithVerb(properties: IAutoCompleteProps) {
 
 export function getLastCharacterOf(content: string) {
   return content.slice(-1);
+}
+
+export function getLastSymbolInUrl(url: string) {
+  const availableSymbols = [
+    {
+      key: '/',
+      value: 0
+    },
+    {
+      key: ',',
+      value: 0
+    },
+    {
+      key: '$',
+      value: 0
+    },
+    {
+      key: '=',
+      value: 0
+    },
+    {
+      key: '&',
+      value: 0
+    },
+    {
+      key: '?',
+      value: 0
+    }
+  ];
+
+  availableSymbols.forEach(element => {
+    element.value = url.lastIndexOf(element.key);
+  });
+  const max = availableSymbols.reduce((prev, current) => (prev.value > current.value) ? prev : current);
+  return max;
 }