Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Combobox] Unexpected keyboard navigation with arrow keys #6750

Closed
macandcheese opened this issue Apr 7, 2023 · 11 comments
Closed

[Combobox] Unexpected keyboard navigation with arrow keys #6750

macandcheese opened this issue Apr 7, 2023 · 11 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-combobox Issues that pertain to the calcite-combobox and related components Calcite (design) Issues logged by Calcite designers. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - low Issue is non core or affecting less that 10% of people using the library visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Milestone
2024-06-25 - Jun ...

Comments

@macandcheese
Copy link
Contributor

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)
@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 7, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Apr 7, 2023
@geospatialem geospatialem added the a11y Issues related to Accessibility fixes or improvements. label Apr 7, 2023
@macandcheese macandcheese mentioned this issue Apr 13, 2023
Closed
@macandcheese macandcheese added the c-combobox Issues that pertain to the calcite-combobox and related components label Apr 13, 2023
@geospatialem geospatialem added the p - low Issue is non core or affecting less that 10% of people using the library label Jul 19, 2023
@geospatialem
Copy link
Member

Related and could be approached together, possibly with chip-group as a refactor #6776 + #6777

@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jul 19, 2023
@geospatialem geospatialem mentioned this issue Jul 19, 2023
Closed
@macandcheese
Copy link
Contributor Author

We also might want to disallow opening the dropdown via down arrow while a Chip's close button is in focus.

@driskull
Copy link
Member

This may have been fixed in #6776. cc @DitwanP

@driskull
Copy link
Member

It looks like the input is made transparent when a chip is actively focused. Anyone know why that is? cc @paulcpederson @macandcheese

"input--transparent": this.activeChipIndex > -1,

Is there a valid reason to not show the placeholder when a chip is being focused?

@macandcheese
Copy link
Contributor Author

I don't think so, I'd expect it to remain visible. In the video in the original post above it seems to happen only when the Chip closest to the input has its close button focused. Not sure if its changed since that video however.

driskull added a commit that referenced this issue Jun 18, 2024
@driskull
fix(combobox): no longer hides input when a selected item chip is foc…
7f2a1ba 
…used. #6750
@driskull driskull mentioned this issue Jun 18, 2024
Merged
@driskull driskull self-assigned this Jun 18, 2024
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jun 18, 2024
@paulcpederson
Copy link
Member

I think the interaction behavior was modeled after https://mui.com/material-ui/react-autocomplete/#multiple-values

@driskull
Copy link
Member

driskull commented Jun 18, 2024 •
edited
Loading

@paulcpederson @macandcheese should we get design's opinion here? I'd prefer to remove it if possible but would like their approval.

cc @SkyeSeitz @ashetland

Sky, Aaron, can we remove hiding the placeholder text when a chip is focused? I'd like to keep it shown and don't see a good reason to hide it.

@ashetland
Copy link

ashetland commented Jun 18, 2024 •
edited
Loading

Agreed, it may be intentional and matches the MUI example, but it feels unexpected.

@driskull
Copy link
Member

Thanks @ashetland. PR to remove it is ready.

@jcfranco jcfranco added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible label Jun 18, 2024
driskull added a commit that referenced this issue Jun 18, 2024
@driskull
fix(combobox): no longer hides input when a selected item chip is foc…
24c45b3 
…used (#9625)

**Related Issue:** #6750

## Summary

- no longer hides input when a selected item chip is focused
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Jun 18, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Jun 18, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Jun 20, 2024

🍡 Verified locally on dev

@DitwanP DitwanP closed this as completed Jun 20, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Jun 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-combobox Issues that pertain to the calcite-combobox and related components Calcite (design) Issues logged by Calcite designers. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - low Issue is non core or affecting less that 10% of people using the library visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Projects
None yet
Milestone
2024-06-25 - Jun Release
Development

No branches or pull requests
8 participants
@jcfranco @paulcpederson @driskull @macandcheese @geospatialem @DitwanP @ashetland @brittneytewks