Updated EuiComboBox to allow the options list to open for single selection custom options

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`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**

src-docs/src/views/combo_box/combo_box_example.js

@@ -83,7 +83,19 @@ const singleSelectionSnippet = `<EuiComboBox
   options={options}
   selectedOptions={selectedOptions}
   onChange={onChange}
-  isClearable={false}
+/>`;
+
+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}
+  onChange={onChange}
 />`;
 
 import DisallowCustomOptions from './disallow_custom_options';
@@ -405,6 +417,36 @@ 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,
+            so provide a help text explaining that this option is available.
+          </p>
+        </Fragment>
+      ),
+      props: { EuiComboBox },
+      snippet: singleSelectionCustomOptionsSnippet,
+      demo: <SingleSelectionCustomOptions />,
+    },
     {
       title: 'Disallowing custom options',
       source: [

src-docs/src/views/combo_box/single_selection.js

@@ -59,7 +59,7 @@ export default () => {
         options={options}
         selectedOptions={selectedOptions}
         onChange={onChange}
-        isClearable={false}
+        isClearable={true}
       />
     </DisplayToggles>
   );

src-docs/src/views/combo_box/single_selection_custom_options.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+import { EuiComboBox, EuiFormRow } from '../../../../src/components';
+
+const options = [
+  {
+    label: 'Software Developer',
+    'data-test-subj': 'softDevOption',
+  },
+  {
+    label: 'Mobile Developer',
+  },
+  {
+    label: 'Javascript Engineer',
+  },
+  {
+    label: 'UX Designer',
+  },
+  {
+    label: 'UI Designer',
+  },
+  {
+    label: 'Product Designer',
+  },
+  {
+    label: 'QA Engineer',
+  },
+];
+
+export default () => {
+  const [selectedOptions, setSelected] = useState([options[2]]);
+
+  const onChange = selectedOptions => {
+    // We should only get back either 0 or 1 options.
+    setSelected(selectedOptions);
+  };
+
+  const onCreateOption = (searchValue = []) => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+    if (!normalizedSearchValue) {
+      return;
+    }
+
+    const newOption = {
+      label: searchValue,
+    };
+
+    // Select the option.
+    setSelected([newOption]);
+  };
+
+  return (
+    <EuiFormRow
+      label="Your occupation"
+      helpText="Select an occupation from the list. If your occupation isn’t available, create a custom one.">
+      <EuiComboBox
+        placeholder="Select a single occupation"
+        singleSelection={{ asPlainText: true }}
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        onCreateOption={onCreateOption}
+        isClearable={true}
+      />
+    </EuiFormRow>
+  );
+};

src/components/combo_box/combo_box.tsx

@@ -473,10 +473,7 @@ export class EuiComboBox<T> extends Component<
 
     this.clearSearchValue();
 
-    if (
-      this.isSingleSelectionCustomOption() ||
-      (Boolean(singleSelection) && matchingOptions.length < 1)
-    ) {
+    if (Boolean(singleSelection)) {
       // Adding a custom option to a single select that does not appear in the list of options
       this.closeList();
     }
@@ -516,29 +513,13 @@ 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);
     }
-    if (!this.isSingleSelectionCustomOption()) {
-      this.openList();
-    }
+
+    this.openList();
+
     this.setState({ hasFocus: true });
   };