[EuiComboBox] Fix delimited search value option creation

CHANGELOG.md

@@ -7,6 +7,7 @@
 **Bug fixes**
 
 - Fixed `EuiFacetGroup` container expansion due to negative margin value ([#3871](https://github.com/elastic/eui/pull/3871))
+- Fixed `EuiComboBox` delimeter-separated option creation and empty state prompt text ([#3841](https://github.com/elastic/eui/pull/3841))
 
 **Breaking changes**
 

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
 
-const options = [
+const staticOptions = [
   {
     label: 'Titan',
     'data-test-subj': 'titanOption',
@@ -39,6 +39,7 @@ const options = [
 ];
 
 export default () => {
+  const [options, setOptions] = useState(staticOptions);
   const [selectedOptions, setSelected] = useState([options[2], options[4]]);
 
   const onChange = selectedOptions => {
@@ -62,11 +63,13 @@ export default () => {
         option => option.label.trim().toLowerCase() === normalizedSearchValue
       ) === -1
     ) {
-      options.push(newOption);
+      setOptions([...options, newOption]);
     }
 
     // Select the option.
-    setSelected([...selectedOptions, newOption]);
+    // Use the previousState parameter (prevSelected) from the setState
+    // instance (setSelected) to ensure looped calls do not override each other
+    setSelected(prevSelected => [...prevSelected, newOption]);
   };
 
   return (

src/components/combo_box/combo_box.tsx

@@ -539,7 +539,7 @@ export class EuiComboBox<T> extends Component<
     const { delimiter } = this.props;
     if (delimiter) {
       searchValue.split(delimiter).forEach((option: string) => {
-        if (option.length > 0) this.addCustomOption(true, option);
+        if (option.length > 0) this.addCustomOption(isContainerBlur, option);
       });
     } else {
       this.addCustomOption(isContainerBlur, searchValue);
@@ -773,9 +773,7 @@ export class EuiComboBox<T> extends Component<
       if (searchValue && this.state.isListOpen === false) this.openList();
     });
     if (delimiter && searchValue.endsWith(delimiter)) {
-      searchValue.split(delimiter).forEach(value => {
-        if (value.length > 0) this.addCustomOption(false, value);
-      });
+      this.setCustomOptions(false);
     }
   };
 

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -337,61 +337,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
       );
     } else if (searchValue && matchingOptions && matchingOptions.length === 0) {
       if (onCreateOption && getSelectedOptionForSearchValue) {
-        const selectedOptionForValue = getSelectedOptionForSearchValue(
-          searchValue,
-          selectedOptions
-        );
-
-        if (selectedOptionForValue) {
-          // Disallow duplicate custom options.
-          emptyStateContent = (
-            <p>
-              <EuiI18n
-                token="euiComboBoxOptionsList.alreadyAdded"
-                default="{label} has already been added"
-                values={{
-                  label: <strong>{selectedOptionForValue.label}</strong>,
-                }}
-              />
-            </p>
-          );
-        } else {
-          const highlightSearchValue = (text: string, searchValue: string) => {
-            const reg = new RegExp(/(\{searchValue})/, 'gi');
-            const parts = text.split(reg);
-            return (
-              <p className="euiComboBoxOption__emptyStateText">
-                {parts.map((part, idx) =>
-                  part.match(reg) ? (
-                    <strong key={idx}>{searchValue}</strong>
-                  ) : (
-                    part
-                  )
-                )}
-              </p>
-            );
-          };
-
-          emptyStateContent = (
-            <div className="euiComboBoxOption__contentWrapper">
-              {customOptionText ? (
-                highlightSearchValue(customOptionText, searchValue)
-              ) : (
-                <p className="euiComboBoxOption__emptyStateText">
-                  <EuiI18n
-                    token="euiComboBoxOptionsList.createCustomOption"
-                    default="Add {searchValue} as a custom option"
-                    values={{
-                      searchValue: <strong>{searchValue}</strong>,
-                    }}
-                  />
-                </p>
-              )}
-              {hitEnterBadge}
-            </div>
-          );
-        }
-      } else {
         if (delimiter && searchValue.includes(delimiter)) {
           emptyStateContent = (
             <div className="euiComboBoxOption__contentWrapper">
@@ -406,16 +351,73 @@ export class EuiComboBoxOptionsList<T> extends Component<
             </div>
           );
         } else {
-          emptyStateContent = (
-            <p>
-              <EuiI18n
-                token="euiComboBoxOptionsList.noMatchingOptions"
-                default="{searchValue} doesn't match any options"
-                values={{ searchValue: <strong>{searchValue}</strong> }}
-              />
-            </p>
+          const selectedOptionForValue = getSelectedOptionForSearchValue(
+            searchValue,
+            selectedOptions
           );
+          if (selectedOptionForValue) {
+            // Disallow duplicate custom options.
+            emptyStateContent = (
+              <p>
+                <EuiI18n
+                  token="euiComboBoxOptionsList.alreadyAdded"
+                  default="{label} has already been added"
+                  values={{
+                    label: <strong>{selectedOptionForValue.label}</strong>,
+                  }}
+                />
+              </p>
+            );
+          } else {
+            const highlightSearchValue = (
+              text: string,
+              searchValue: string
+            ) => {
+              const reg = new RegExp(/(\{searchValue})/, 'gi');
+              const parts = text.split(reg);
+              return (
+                <p className="euiComboBoxOption__emptyStateText">
+                  {parts.map((part, idx) =>
+                    part.match(reg) ? (
+                      <strong key={idx}>{searchValue}</strong>
+                    ) : (
+                      part
+                    )
+                  )}
+                </p>
+              );
+            };
+
+            emptyStateContent = (
+              <div className="euiComboBoxOption__contentWrapper">
+                {customOptionText ? (
+                  highlightSearchValue(customOptionText, searchValue)
+                ) : (
+                  <p className="euiComboBoxOption__emptyStateText">
+                    <EuiI18n
+                      token="euiComboBoxOptionsList.createCustomOption"
+                      default="Add {searchValue} as a custom option"
+                      values={{
+                        searchValue: <strong>{searchValue}</strong>,
+                      }}
+                    />
+                  </p>
+                )}
+                {hitEnterBadge}
+              </div>
+            );
+          }
         }
+      } else {
+        emptyStateContent = (
+          <p>
+            <EuiI18n
+              token="euiComboBoxOptionsList.noMatchingOptions"
+              default="{searchValue} doesn't match any options"
+              values={{ searchValue: <strong>{searchValue}</strong> }}
+            />
+          </p>
+        );
       }
     } else if (!options.length) {
       emptyStateContent = (