[Combobox] clear user entered text on blur

[avezina]

The description below is outdated and the issue title has been updated accordingly. Please read all the comments below before implementing, specifically #2162 (comment).

Description

My team is working on a widget where we need to be able to do multiple selections from a drop-down. For example in the mockup below with the multiple check-boxes.

Acceptance Criteria

Ideally, we need a way to select multiple choices, and we need the selected choices to be listed against the header item so the end-user can see which items were selected without expanding the dropdown.

Which Component

It seems the Combobox provides the option to expose the selected options as tabs, but we would like to disable the input text parameter and only rely on selecting options from the dropdown similar to the Button>Dropdown>Simple component.

We may just use the Combobox for now, and remove the input text later if that parameter is made optional.

[bstifle]

Hi @avezina !

The dropdown seems like unnecessary redundancy. In this use case, can we just remove the dropdown and rely on the checkboxes?

[macandcheese]

@avezina - checking in on this. Is this still valid?

[avezina]

@macandcheese thanks for looping back on this. Yes this is still a valid request. For example, we are using the Combobox in the UtilityNetworkTrace widget (see sample) where one or multiple values can be selected. While the text could be used to search a value, I feel like it should not persist?

[macandcheese]

I can’t seem to preview that UX in the sample (it asks for authentication to view layers - after which the panel is disabled), however - the combobox shouldn’t persist text after making a selection - after it is entered and an item is selected, the text clears.

To confirm, this enhancement is to introduce a mode where no text is entered at all?

I wonder if a “multiple” select would be a better component to support that workflow since selects natively don’t have text entry or filtering associated.

That could be a valid enhancement for our select but not something currently offered in that component (and, depending on need, maybe not solved completely by an enhancement to select).

cc @benelan @geospatialem @asangma for thoughts?

[avezina]

@macandcheese Username and password are provided below the sample embed, in the text. Does that work on your end?

I think having a way to type to search for a value from the dropdown is still valuable, but yes I think I would expect the value to then clear once the dropdown collapses (not necessarily after an item is selected since there could be more than one item being selected from the filtered list)

[macandcheese]

Whoops - my fault - I was viewing on a phone and the login information was just out of view.

That makes sense. As an implementation example - this is how MUI handles this: https://mui.com/components/autocomplete/#multiple-values

Basically - on blur, clear the user-entered text value.

[geospatialem]

Verified in 1.8.1-next.1 with the allowCustomValues set to false on blur:

<calcite-combobox allow-custom-values="false">
 ...
</calcite-combobox>

[geospatialem]

Re-opening as the fix was reverted with the change in #7954. To ensure this is mitigated as it was intended, this will be addressed in next week's maintenance release.

[geospatialem]

Reallocating to later this month, where team members can do more extensive testing with the related Windows and trackpad regression once implemented.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.10.0-next.10 with:

<calcite-combobox allow-custom-values="false">
...
</calcite-combobox>

and with the use case from #7934 to ensure Windows trackpad behaves as-expected.