Added delimiter prop to EuiComboBox

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
 - Added `sortMatchesBy` prop for `EuiComboBox` ([#3089](https://github.com/elastic/eui/pull/3089))
 - Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))

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

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+
+import { EuiComboBox } from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.options = [
+      {
+        label: 'Titan',
+        'data-test-subj': 'titanOption',
+      },
+      {
+        label: 'Enceladus is disabled',
+        disabled: true,
+      },
+      {
+        label: 'Mimas',
+      },
+      {
+        label: 'Dione',
+      },
+      {
+        label: 'Iapetus',
+      },
+      {
+        label: 'Phoebe',
+      },
+      {
+        label: 'Rhea',
+      },
+      {
+        label:
+          "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+      },
+      {
+        label: 'Tethys',
+      },
+      {
+        label: 'Hyperion',
+      },
+    ];
+
+    this.state = {
+      selectedOptions: [this.options[2], this.options[4]],
+    };
+  }
+
+  onChange = selectedOptions => {
+    this.setState({
+      selectedOptions,
+    });
+  };
+
+  onCreateOption = (searchValue, flattenedOptions) => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+    if (!normalizedSearchValue) {
+      return;
+    }
+
+    const newOption = {
+      label: searchValue,
+    };
+
+    // Create the option if it doesn't exist.
+    if (
+      flattenedOptions.findIndex(
+        option => option.label.trim().toLowerCase() === normalizedSearchValue
+      ) === -1
+    ) {
+      this.options.push(newOption);
+    }
+
+    // Select the option.
+    this.setState(prevState => ({
+      selectedOptions: prevState.selectedOptions.concat(newOption),
+    }));
+  };
+
+  render() {
+    const { selectedOptions } = this.state;
+    return (
+      <EuiComboBox
+        placeholder="Select or create options"
+        options={this.options}
+        delimiter=","
+        noSuggestions
+        selectedOptions={selectedOptions}
+        onChange={this.onChange}
+        onCreateOption={this.onCreateOption}
+        isClearable={true}
+        data-test-subj="demoComboBox"
+      />
+    );
+  }
+}

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

@@ -59,6 +59,10 @@ import Disabled from './disabled';
 const disabledSource = require('!!raw-loader!./disabled');
 const disabledHtml = renderToHtml(Disabled);
 
+import Delimiter from './combo_box_delimiter';
+const delimiterSource = require('!!raw-loader!./combo_box_delimiter');
+const delimiterHtml = renderToHtml(Delimiter);
+
 import StartingWith from './startingWith';
 const startingWithSource = require('!!raw-loader!./startingWith');
 const startingWithHtml = renderToHtml(StartingWith);
@@ -351,6 +355,27 @@ export const ComboBoxExample = {
       props: { EuiComboBox },
       demo: <Async />,
     },
+    {
+      title: 'With delimiter',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: delimiterSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: delimiterHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use the <EuiCode>delimiter</EuiCode> prop to trigger an entry creation
+          in <EuiCode>EuiComboBox</EuiCode> .
+        </p>
+      ),
+      props: { EuiComboBox },
+      demo: <Delimiter />,
+    },
     {
       title: 'Sorting matches',
       source: [

src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -57,6 +57,49 @@ exports[`EuiComboBox is rendered 1`] = `
 </div>
 `;
 
+exports[`props delimiter is rendered 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    fullWidth={false}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={false}
+    noIcon={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onCloseListClick={[Function]}
+    onFocus={[Function]}
+    onOpenListClick={[Function]}
+    onRemoveOption={[Function]}
+    rootId={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+        Object {
+          "label": "Dione",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas, Dione"
+  />
+</div>
+`;
+
 exports[`props full width is rendered 1`] = `
 <div
   aria-expanded={false}

src/components/combo_box/combo_box.test.tsx

@@ -175,6 +175,18 @@ describe('props', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('delimiter is rendered', () => {
+    const component = shallow(
+      <EuiComboBox
+        options={options}
+        selectedOptions={[options[2], options[3]]}
+        delimiter=","
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
 
 describe('behavior', () => {

src/components/combo_box/combo_box.tsx

@@ -126,6 +126,7 @@ interface _EuiComboBoxProps<T>
    * `string` | `ReactElement` or an array of these
    */
   append?: EuiFormControlLayoutProps['append'];
+  delimiter?: string;
 }
 
 /**
@@ -400,15 +401,15 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  addCustomOption = (isContainerBlur: boolean) => {
+  addCustomOption = (isContainerBlur: boolean, searchValue: string) => {
     const {
       onCreateOption,
       options,
       selectedOptions,
       singleSelection,
     } = this.props;
 
-    const { searchValue, matchingOptions } = this.state;
+    const { matchingOptions } = this.state;
 
     if (this.doesSearchMatchOnlyOption()) {
       this.onAddOption(matchingOptions[0], isContainerBlur);
@@ -531,7 +532,15 @@ export class EuiComboBox<T> 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(true);
+        const { searchValue } = this.state;
+        const { delimiter } = this.props;
+        if (delimiter) {
+          searchValue
+            .split(delimiter)
+            .forEach((option: string) => this.addCustomOption(true, option));
+        } else {
+          this.addCustomOption(true, searchValue);
+        }
       }
     }
   };
@@ -576,7 +585,15 @@ export class EuiComboBox<T> extends Component<
             this.state.matchingOptions[this.state.activeOptionIndex]
           );
         } else {
-          this.addCustomOption(false);
+          const { searchValue } = this.state;
+          const { delimiter } = this.props;
+          if (delimiter) {
+            searchValue
+              .split(delimiter)
+              .forEach((option: string) => this.addCustomOption(false, option));
+          } else {
+            this.addCustomOption(false, searchValue);
+          }
         }
         break;
 
@@ -708,7 +725,8 @@ export class EuiComboBox<T> extends Component<
   onSearchChange: NonNullable<
     EuiComboBoxInputProps<T>['onChange']
   > = searchValue => {
-    const { onSearchChange } = this.props;
+    const { onSearchChange, delimiter } = this.props;
+
     if (onSearchChange) {
       const hasMatchingOptions = this.state.matchingOptions.length > 0;
       onSearchChange(searchValue, hasMatchingOptions);
@@ -717,6 +735,9 @@ export class EuiComboBox<T> extends Component<
     this.setState({ searchValue }, () => {
       if (searchValue && this.state.isListOpen === false) this.openList();
     });
+    if (delimiter && searchValue.endsWith(delimiter)) {
+      this.addCustomOption(false, searchValue.split(delimiter)[0]);
+    }
   };
 
   componentDidMount() {
@@ -848,8 +869,9 @@ export class EuiComboBox<T> extends Component<
       selectedOptions,
       singleSelection,
       prepend,
-      append,
       sortMatchesBy,
+      delimiter,
+      append,
       ...rest
     } = this.props;
     const {