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

@@ -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)
 

src/components/combo_box/combo_box.js

@@ -211,13 +211,18 @@ 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) => {
     const {
       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 = () => {