Revert "Updated EuiComboBox to allow the options list to open for sin…

…gle selection custom options (elastic#3706)" This reverts commit 535182a.
anishagg17 · Jul 20, 2020 · 70bf37c · 70bf37c
1 parent 666b0d0
commit 70bf37c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 117 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,5 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Updated `EuiComboBox` to allow the options list to open for single selection custom options ([#3706](https://github.com/elastic/eui/pull/3706))
 - Added `useEuiI18n` hook for localization ([#3749](https://github.com/elastic/eui/pull/3749))
 
 **Bug fixes**

diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
@@ -83,20 +83,7 @@ const singleSelectionSnippet = `<EuiComboBox
   options={options}
   selectedOptions={selectedOptions}
   onChange={onChange}
-/>`;
-
-import SingleSelectionCustomOptions from './single_selection_custom_options';
-const singleSelectionCustomOptionsSource = require('!!raw-loader!./single_selection_custom_options');
-const singleSelectionCustomOptionsHtml = renderToHtml(
-  SingleSelectionCustomOptions
-);
-const singleSelectionCustomOptionsSnippet = `<EuiComboBox
-  placeholder="Select a single option"
-  singleSelection={{ asPlainText: true }}
-  options={options}
-  selectedOptions={selectedOptions}
-  onCreateOption={onCreateOption}
-  onChange={onChange}
+  isClearable={false}
 />`;
 
 import DisallowCustomOptions from './disallow_custom_options';
@@ -418,37 +405,6 @@ export const ComboBoxExample = {
       snippet: singleSelectionSnippet,
       demo: <SingleSelection />,
     },
-    {
-      title: 'Single selection with custom options',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: singleSelectionCustomOptionsSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: singleSelectionCustomOptionsHtml,
-        },
-      ],
-      text: (
-        <Fragment>
-          <p>
-            You can allow the user to select a single option and also allow the
-            creation of custom options. To do that, use the{' '}
-            <EuiCode>singleSelection</EuiCode> in conjunction with the{' '}
-            <EuiCode>onCreateOption</EuiCode> prop.
-          </p>
-          <p>
-            <strong>Note:</strong> Creating custom options might not be obvious
-            to the user, so provide help text explaining that this option is
-            available.
-          </p>
-        </Fragment>
-      ),
-      props: { EuiComboBox },
-      snippet: singleSelectionCustomOptionsSnippet,
-      demo: <SingleSelectionCustomOptions />,
-    },
     {
       title: 'Disallowing custom options',
       source: [

diff --git a/src-docs/src/views/combo_box/single_selection.js b/src-docs/src/views/combo_box/single_selection.js
@@ -59,6 +59,7 @@ export default () => {
         options={options}
         selectedOptions={selectedOptions}
         onChange={onChange}
+        isClearable={false}
       />
     </DisplayToggles>
   );

diff --git a/src-docs/src/views/combo_box/single_selection_custom_options.js b/src-docs/src/views/combo_box/single_selection_custom_options.js
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
@@ -473,7 +473,10 @@ export class EuiComboBox<T> extends Component<
 
     this.clearSearchValue();
 
-    if (Boolean(singleSelection)) {
+    if (
+      this.isSingleSelectionCustomOption() ||
+      (Boolean(singleSelection) && matchingOptions.length < 1)
+    ) {
       // Adding a custom option to a single select that does not appear in the list of options
       this.closeList();
     }
@@ -513,13 +516,29 @@ export class EuiComboBox<T> extends Component<
     return flattenOptions.length === numberOfSelectedOptions;
   };
 
+  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 (
+      Boolean(singleSelection) &&
+      onCreateOption &&
+      selectedOptions.length > 0 &&
+      !options.includes(selectedOptions[0])
+    );
+  };
+
   onComboBoxFocus: FocusEventHandler<HTMLInputElement> = event => {
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
-
-    this.openList();
-
+    if (!this.isSingleSelectionCustomOption()) {
+      this.openList();
+    }
     this.setState({ hasFocus: true });
   };