[EuiComboBox] Add option to singleSelection that allows editing

[j-m]

Given an EuiComboBox with singleSelection={{ asPlainText: true }} and onCreateOption (see EUI docs example)

I want to be able to edit the existing selected value rather than entirely deleting it (afterall, we have the isClearable prop)
(In other words, I want the combobox to behave as a regular input field rather than as pills)
So that I can make minor adjustments without having to remember what I previously entered

This is useful for large datasets with minor variations between options.

I had considered EuiSuggest but there were no examples of enabling custom options or its use with basic options i.e. plaintext (I have over 3500 options in this dropdown, soon to be an order of magnitude or two more).

Tbh EuiCombobox and EuiSuggest are pretty similar, it'd be nice to have a Do and Don't doc for when to use each altho I see a couple issues around this already #2708 #2841

While I'm here, it'd probably be worth you adding a notice to Case-sensitive matching and Async to explain that the consumer's own onSearchChange will have to implement the case-sensitivity i.e. that they're incompatible

[github-actions]

👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year.

Log | Bot Usage

[cee-chen]

Hey @j-m! I definitely see your UX case with singleSelection and custom options. That being said, it's pretty low priority for us as a team right now. We'd 100% accept an open source contribution with that functionality however, if you're interested in opening a PR with it!

Tbh EuiCombobox and EuiSuggest are pretty similar, it'd be nice to have a Do and Don't doc for when to use each

100%. Honestly, we have way too many select components in general and we need better guidance on when to use each 🥲 This has been on our radar for a while, so I went ahead and opened an issue for it: #6880

While I'm here, it'd probably be worth you adding a notice to Case-sensitive matching and Async to explain that the consumer's own onSearchChange will have to implement the case-sensitivity i.e. that they're incompatible

Totally valid! @breehall, would you be interested in opening a docs PR with this change as part of your support work this week? It might be good to document that both in the prop's types and in the actual src-docs copy.

[usmanabdurrehman]

Hi @cee-chen Can I try to implement this editable single selection feature?

[cee-chen]

We'd absolutely accept a community PR on this functionality!

For some guidance on the kind of logic I'd expect, I'd suggest detecting singleSelection.plainText on delete keypress and adding a custom handler/branch for that (i.e., delete the pill and insert its value/text back into the input minus one character, so that it "appears" as if only one character has been deleted).

[usmanabdurrehman]

Cool. Thanks for the guidance @cee-chen

[cee-chen]

@j-m FYI this is coming in the next EUI upgrade, and won't require an extra option - the plain text single selection mode will simply act more like an EuiFieldText by default. Feel free to try it out here: https://eui.elastic.co/pr_7332/#/forms/combo-box#single-selection

[j-m]

Wonderful! Thank you, @cee-chen