Calcite-Combobox > Focus item in dropdown displays gray active dot

[richiecarmichael]

Description

The calcite combobox dropdown menu displays the currently selected item with a small blue dot (see "Carrot" below). The first item in the dropdown always has focus and is displayed with a blue outline and small gray dot (see "Apple" below).

The small gray dot next to Apple could be confusing to the user. Some users might this is it the default value, or perhaps original value.

// @adam

Acceptance Criteria

Refer to the Figma file.

• Add foreground.3 bg on :pressed
• Remove previewed grey dot or checkmark on combobox-item :focus
• Do not show gray dot next for focused items in the calcite combobox dropdown.

Relevant Info

No response

Which Component

Combobox

Example Use Case

Multiple Selection

1. https://developers.arcgis.com/calcite-design-system/components/combobox/
2. Click comboxbox toggle button.
3. Engineering is checked even though not added.

Single Selection

1. https://developers.arcgis.com/calcite-design-system/components/combobox/
2. Change selection-mode to "single"
3. Click comboxbox toggle button.
4. Engineering is dotted even though not added.

Esri team

ArcGIS Maps SDK for JavaScript

[macandcheese]

Thanks for opening @richiecarmichael - @ashetland @SkyeSeitz can we take a look at this?

I agree it may be confusing. Additionally, our behavior between Dropdown and Combobox are different. In Dropdown, hover shows the grey dot, while focus does not. In Combobox, hovering shows no dot, but focusing does. It seems like adopting the Dropdown approach in Combobox could solve potential confusion:

Additionally (may be a separate issue) - Dropdown automatically focuses the first (or only) selected item in the list, Combobox always seems to focus the first item whether there is an existing selection or not. Should we address that as well?

[ashetland]

I agree that adopting the Dropdown approach would help here and also improve consistency.

The focus issue is something we could dig into separately.

[DitwanP]

This is included in a larger epic #7733

[SkyeSeitz]

Discussed this with Aaron in context of our interaction state audit. I think we can move forward with this issue separately after all before further refinements to Combobox.

Here is the proposed design to remove the selection icon preview on focused Combobox Items:

[github-actions]

cc @geospatialem, @brittneytewks

[SkyeSeitz]

Re: focus order, for Combobox it might make sense to default to focusing the last item selected in order to prioritize keeping selected items in view?

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on 3.0.0-next.51 with all selectionModes, for instance "multiple":