[EuiComboBox] Fix delimited search value option creation#3841
[EuiComboBox] Fix delimited search value option creation#3841thompsongl merged 6 commits intoelastic:masterfrom
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/ |
|
I wonder if a better option is to update our examples' calls of 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. |
|
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 |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/ |
There was a problem hiding this comment.
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>
);|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/ |
|
flaky test jenkins test this |
chandlerprall
left a comment
There was a problem hiding this comment.
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
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3841/ |
elizabetdev
left a comment
There was a problem hiding this comment.
Thanks for making the changes. I tested again and it looks good! 🎉
* timeout between addCustomOption calls * fix the docs example * delimeter empty state prompt * CL * keep changeable options in state
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
addCustomOptioncalls not updatingprops.selectedOptionsfast enough for the nextaddCustomOptioncall to have access to the updated list, effectively resetting the selected list each time until the last.BecauseaddCustomOptionis provided by the consumer, we can't control its logic. This proposes a simple no-delaysetTimeout, which gives enough time to finish the execution queue between calls.Updated the docs example to more appropriately update using the
useStatecallback 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- [ ] Added or updated jest tests