Combobox in single-select mode retains filter text after selected value is shown when clicking directly on or tabbing away

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Actual Behavior

If I click on the combobox directly, or tab once, the selected value is shown but the filter text is retained. If I click anywhere else in the document or tab multiple times, the filter text is cleared.

https://github.com/Esri/calcite-design-system/assets/29742178/229d3bdb-4a7e-40c5-b886-2d82e865c2bb

Expected Behavior

Clicking within the combobox should have the same filter clearing effect as clicking elsewhere in the document.

https://github.com/Esri/calcite-design-system/assets/29742178/eb6d804b-2021-4bc9-9aba-5aac3515efa9

(video produced using workaround)

Reproduction Sample

https://gist.github.com/nCastle1/34c0cdae6ccfe2fb3aeb44d76e2ba0d1

Reproduction Steps

Repro steps are embedded in code pen.

Reproduction Version

2.4.0

Relevant Info

Reproducible on Mac in a variety of browsers including Firefox and Edge.

In the existing implementation, the method that clears the filter text on pointer down excludes clicks on the combobox itself (https://github.com/Esri/calcite-design-system/blob/a8b61f44c9268621cf342b1de5d9c514df06348f/packages/calcite-components/src/components/combobox/combobox.tsx#L330). I think these events should probably not be filtered in the single-select no-custom-values case.

The on limitation of doing that is that it becomes impossible to move the cursor around the filter text without clearing (although it requires multiple clicks currently). Using the arrow keys to move the cursor position within the filter text input does not work - I'm not sure if that's a bug or intentional.

Without changing the existing behavior, it would be easier to work around this if there was a publicly exposed method to reset the filter text.

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

This is a pretty subtle issue. It isn't especially easy to workaround because calcite doesn't expose any properties for setting or clearing the filter text. I could reach into the shadow DOM, or I could emit a document-wide pointer down event (that's the workaround I used in the video).

  private _onComboboxClose(event: Event): void {
    document.dispatchEvent(new PointerEvent("pointerdown", { isPrimary: true }));
}

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

Esri / calcite-design-system