From 35f9bf0c5fcc24d4eb5229f568166f6d9089ee52 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompsongl@users.noreply.github.com>
Date: Thu, 25 Apr 2019 17:01:48 -0500
Subject: [PATCH] EuiComboBox with single selection and custom option should
 not show a list (#1882)

* close and keep closed the options list if the single selected option is custom

* allow arrow button to open the list regardless of state

* #1882 CL entry
---
 CHANGELOG.md                          |  1 +
 src/components/combo_box/combo_box.js | 29 ++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c9da445adf..49fec306dc8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Fixed `euiBreakpoint()` warning to give accurate feedback ([#1874](https://github.com/elastic/eui/pull/1874))
 - Fixed type definitions around `EuiI18n`'s `default` prop to better support use cases ([#1861](https://github.com/elastic/eui/pull/1861))
 - Localized `EuiTablePagination`'s row count selection ([#1883](https://github.com/elastic/eui/pull/1883))
+- Fixed `EuiComboBox` with `singleSelection` and `onAddCustomOption` reopening the options list after adding a custom option ([#1882](https://github.com/elastic/eui/pull/1882))
 
 ## [`10.1.0`](https://github.com/elastic/eui/tree/v10.1.0)
 
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index 37c7d23a79a..26e3fdc0165 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -211,6 +211,10 @@ export class EuiComboBox extends Component {
 
     // Delete last pill.
     this.onRemoveOption(this.props.selectedOptions[this.props.selectedOptions.length - 1]);
+
+    if (this.props.singleSelection && !this.state.isListOpen) {
+      this.openList();
+    }
   };
 
   addCustomOption = (isContainerBlur) => {
@@ -218,6 +222,7 @@ export class EuiComboBox extends Component {
       options,
       selectedOptions,
       onCreateOption,
+      singleSelection
     } = this.props;
 
     const {
@@ -253,6 +258,11 @@ export class EuiComboBox extends Component {
     }
 
     this.clearSearchValue();
+
+    if (this.isSingleSelectionCustomOption() || (singleSelection && matchingOptions.length < 1)) {
+      // Adding a custom option to a single select that does not appear in the list of options
+      this.closeList();
+    }
   };
 
   doesSearchMatchOnlyOption = () => {
@@ -272,11 +282,22 @@ export class EuiComboBox extends Component {
     return flattenOptionGroups(options).length === selectedOptions.length;
   };
 
+  isSingleSelectionCustomOption = () => {
+    const { onCreateOption, options, selectedOptions, singleSelection } = this.props;
+    // The selected option of a single select is custom and does not appear in the list of options
+    return singleSelection
+    && onCreateOption
+    && selectedOptions.length > 0
+    && !options.includes(selectedOptions[0]);
+  }
+
   onComboBoxFocus = () => {
     if (this.props.onFocus) {
       this.props.onFocus();
     }
-    this.openList();
+    if (!this.isSingleSelectionCustomOption()) {
+      this.openList();
+    }
     this.setState({ hasFocus: true });
   }
 
@@ -401,6 +422,9 @@ export class EuiComboBox extends Component {
     // Clicking the clear button will also cause it to disappear. This would result in focus
     // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
     this.searchInput.focus();
+    if (!this.state.isListOpen) {
+      this.openList();
+    }
   }
 
   onComboBoxClick = () => {
@@ -419,6 +443,9 @@ export class EuiComboBox extends Component {
 
   onOpenListClick = () => {
     this.searchInput.focus();
+    if (!this.state.isListOpen) {
+      this.openList();
+    }
   };
 
   onCloseListClick = () => {