Skip to content

[Combobox] Unexpected keyboard navigation with arrow keys #6750

@macandcheese

Description

@macandcheese

Actual Behavior

When using Combobox in Multiple selection mode, navigating through the Chips with arrow keys produces unexpected behavior.

Using the arrows to navigate after entering Chip area with keyboard, focuses the chip in the wrong direction. Additionally, at some times the placeholder text disappears

Expected Behavior

I would expect the arrow keys to navigate correctly, and not have the placeholder text occasionally disappear as I interact with the chip focus with arrows.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/KKGKbpy?editors=1000

Reproduction Steps

  1. Open Codepen
  2. Use Tab to focus Combobox - first chip's close button will be focused first.
  3. Use Tab again to focus the second chip's close button.
  4. Use Left Arrow - expect to see the first chip's close button focused.
  5. Instead, the third chip's close button is focused.
  6. Notice that the placeholder text occasionally disappears while using keyboard arrows

Reproduction Version

1.2.0

Relevant Info

Screen.Recording.2023-04-06.at.7.37.51.PM.mov

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

No response

Esri team

Calcite (design)

Metadata

Metadata

Labels

4 - verifiedIssues that have been tested, confirmed as mitigated, and are ready to close.Calcite (design)Issues logged by Calcite designers.a11yIssues related to Accessibility fixes or improvements.bugBug reports for broken functionality. Issues should include a reproduction of the bug.c-comboboxIssues that pertain to the calcite-combobox and related componentsimpact - p2 - want for an upcoming milestoneUser set priority impact status of p2 - want for an upcoming milestonep - lowIssue is non core or affecting less that 10% of people using the libraryvisual changesIssues with visual changes that are added for consistency, but are not backwards compatible.

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions