Enhancement: Add clear affordance to combobox

[macandcheese]

Description

Follow up from Teams chat:

I'd like to propose adding a default clear button affordance, on single / multi select mode on combobox.

Consider these two comboboxes, both in (current) single mode:

https://jsbin.com/qodekogepi/1/edit?html,output

The first, as a user, is empty. If I select a value, I have no way to remove that now. The second, as a user, is already populated. This would be the use case for having a clear button, where the app needs a value there, whether it's a system default or a selection I've made in the past.

Adding "disableClear" would let apps remove the ability to clear this when needed.

Acceptance Criteria

To summarize proposal:

• Always display a clear "x" affordance when the combobox is populated - in single select or in multi select.
• Add a disableClear property to allow users to opt-out of displaying that clear "x" affordance, to basically create a "single-persist" mode without needing to add another mode option

Which Component

Combobox

[macandcheese]

Related : #2311

[macandcheese]

@benelan @jcfranco - the icon placeholder / clear affordance has come up a few times since this issue. Could we bump priority on this a small bit?

[MonikaKanduri4525]

+1. We need the icon placeholder for the VTSE product.

[paulcpederson]

+1 We'd love the single persist option as we use the single select combobox as a select menu where we want to always have an element selected.

[macandcheese]

+1 We'd love the single persist option as we use the single select combobox as a select menu where we want to always have an element selected.

For this "single-persist" use case, would you expect to default selection to the first item if no children are set to active?

[paulcpederson]

For our use case it's not super important as we have a default value that we always select up front. But would be good to allow either. Classic <select> element way to do this is to have a disabled option selected up front, which is sort of a hack, but they do allow for both:

    <select>
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="free">Free</option>
        <option value="starter">Starter </option>
        <option value="professional">Professional</option>
        <option value="corporate">Corporate</option>
    </select>

[benelan]

In my opinion, it shouldn't select the first item if none are active. It gives the dev more control, and they can always set one as active if they want.

[macandcheese]

Re: select default : #4032

[driskull]

@macandcheese maybe required property being true should prevent a user from being able to unselect a selected option? @paulcpederson suggested that in another issue.

Currently, it seems a user is always able to unselect the last selected item. Seems like we should prevent that somehow?

[macandcheese]

From #4738 We could look at the behavior of MUI as an example - they by default have a clear affordance that is opt-out with disableClear - this could be combined with fixing the regression to solve all the requests in - #3074

Basically always prevent ability to "double click clear" in single-select, but have the clear affordance, which in your use case you would opt-out of with the prop... I think that sounds reasonable?

To summarize proposal:

Always display a clear "x" affordance when the combobox is populated - in single select or in multi select.
Add a disableClear property to allow users to opt-out of displaying that clear "x" affordance, to basically create a "single-persist" mode without needing to add another mode option
fix this bug as reported in single select.

[driskull]

clearDisabled would be preferred to disableClear so the attribute is clear-disabled

[ashetland]

Figma file is available for this. cc @jcfranco

[geospatialem]

Update will be encompassed as part of #4738

[geospatialem]

Verified in 1.4.0-next.22