[EuiComboBox] Fix delimited search value option creation

[thompsongl]

Summary

Fixes #3794, where a copy-pasted delimited search value would only add the last item in the delimited list.

The problem stemmed from looped addCustomOption calls not updating props.selectedOptions fast enough for the next addCustomOption call to have access to the updated list, effectively resetting the selected list each time until the last.

Because addCustomOption is provided by the consumer, we can't control its logic. This proposes a simple no-delay setTimeout, which gives enough time to finish the execution queue between calls.

Updated the docs example to more appropriately update using the useState callback parameter.

Other docs change is just an update for best practices: keep data in state so it's more visible to React.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox
- [ ] Props have proper autodocs
- [ ] Added documentation

• Checked Code Sandbox works for the any docs examples

- [ ] Added or updated jest tests

• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/

[chandlerprall]

I wonder if a better option is to update our examples' calls of setSelected to allow chaining those updates,

// Select the option.
setSelected(previousSelection => [...previousSelection, newOption]);

Especially in the React async rendering future, I'm wary of using a delay to fix a state update, when that update is tied to waiting for React to re-render in time.

[thompsongl]

I went back and forth on whether to designate this a documentation issue or not. The async rendering future argument has me reconsidering my choice.

I'll try it out

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/

[miukimiu]

I tested passing a,b,c and hitting enter and it works. 🎉

The only thing that I noticed is that the empty state that it's showing is the one for the custom options:

There is an empty state for the delimiter on combo_box_options_list.tsx:

emptyStateContent = (
<div className="euiComboBoxOption__contentWrapper">
    <p className="euiComboBoxOption__emptyStateText">
        <EuiI18n
            token="euiComboBoxOptionsList.delimiterMessage"
            default="Add each item separated by {delimiter}"
            values={{ delimiter: <strong>{delimiter}</strong> }}
        />
    </p>
    {hitEnterBadge}
</div>
);

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/

[chandlerprall]

flaky test jenkins test this

[chandlerprall]

Let's make the options.push(newOption); -> setOptions([...options, newOption]); change to all custom-entry examples to help avoid this coming up again in a future variation. Otherwise this LGTM

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/

[miukimiu]

Thanks for making the changes. I tested again and it looks good! 🎉