Prevent refocusing EuiComboBox input after container blur event (#1863)

* prevent refocusing input after container blur event * formatting * #1863 CL
elastic · Apr 19, 2019 · 98ffbed · 98ffbed
1 parent b2a5487
commit 98ffbed
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 **Bug fixes**
 
 - Added `toastLifeTimeMs` typescript definition for individual toasts in `EuiGlobalToastList` ([#1846](https://github.com/elastic/eui/pull/1846))
+- Added logic to prevent refocusing `EuiComboBox` input after container blur event ([#1863](https://github.com/elastic/eui/pull/1863))
 
 ## [`10.0.1`](https://github.com/elastic/eui/tree/v10.0.1)
 

diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -213,7 +213,7 @@ export class EuiComboBox extends Component {
     this.onRemoveOption(this.props.selectedOptions[this.props.selectedOptions.length - 1]);
   };
 
-  addCustomOption = () => {
+  addCustomOption = (isContainerBlur) => {
     const {
       options,
       selectedOptions,
@@ -226,7 +226,7 @@ export class EuiComboBox extends Component {
     } = this.state;
 
     if (this.doesSearchMatchOnlyOption()) {
-      this.onAddOption(matchingOptions[0]);
+      this.onAddOption(matchingOptions[0], isContainerBlur);
       return;
     }
 
@@ -294,7 +294,7 @@ export class EuiComboBox extends Component {
       // If the user tabs away or changes focus to another element, take whatever input they've
       // typed and convert it into a pill, to prevent the combo box from looking like a text input.
       if (!this.hasActiveOption()) {
-        this.addCustomOption();
+        this.addCustomOption(true);
       }
     }
   }
@@ -367,7 +367,7 @@ export class EuiComboBox extends Component {
     this.onAddOption(option);
   }
 
-  onAddOption = (addedOption) => {
+  onAddOption = (addedOption, isContainerBlur) => {
     if (addedOption.disabled) {
       return;
     }
@@ -384,7 +384,9 @@ export class EuiComboBox extends Component {
     }
 
     this.clearActiveOption();
-    this.searchInput.focus();
+    if (!isContainerBlur) {
+      this.searchInput.focus();
+    }
   };
 
   onRemoveOption = (removedOption) => {