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.

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

[Feature Request]: Align Dropdown / Combobox / Multiselect enter key (open) behaviors #13185

Closed
1 task done
Tracked by #12721
tw15egan opened this issue Feb 17, 2023 · 0 comments · Fixed by #13268
Closed
1 task done
Tracked by #12721

Comments

@tw15egan
Copy link
Collaborator

tw15egan commented Feb 17, 2023

The problem

Originally brought up in #12596

Our 4 ListBox variants behavior is different to open the menu. Some open on enter, some on space, some on down arrow. Comment from @mbgower from the original issue:

Say, while doing so, and comparing interaction across all these things I noticed that pressing Enter was NOT opening the filtering multiselect listbox when it had focus. I thought it should, so went and looked at the others just to make sure everything was consistent. While doing so, noticed a couple of other things (sorry!):

On your dropdown, Enter works fine to toggle the list open (and put focus on the item selected) and closed. I noticed that Down Arrow on a closed dropdown is opening but ALSO advancing past the currently selected item. I don't think that should happen. We definitely want the down arrow to open the listbox, but my expectation is that the action is identical to the Enter key: opens listbox and puts focus on the currently selected item. I think the APG select-only comboxbox reflects this pattern pretty accurately. BTW, I think I had an existing ticket on this one.

Your default multiselect is opening on Enter, but not opening on Down Arrow. (the complete opposite of the filerable variant.) Any reason for that? My expectation would be that the Enter would reveal the listbox, as would the Down Arrow. Unfortunately, there's really nothing directly parallel to this in the APG.

Still talking about the multiselect, the behaviour on open has some considerations. Normally I'd expect the list to open with the focus going to the first item (And BTW, the behaviour with multiselect is that where something is already selected it becomes the first item). However, because Enter is also used to select, this gets a little tricky. If the focus goes to something in the list, a user trying to toggle the list closed by pressing Enter could inadvertently either select the first unselected item or unselect the first selected item. So, my inclination is to say that opening a multiselect with Enter should open the list, but not put focus inside the list. The user would have to arrow down to select items. I'd invite discussion on this. IF the multiselect is opened with the Down Arrow, I think I'd expect regular behaviour: open and move focus to first item.

And just to return to the top of this comment, I confirm my expectation that the filtering multiselect should open on Enter

The solution

We need to identify and implement the correct behaviors for opening all ListBox variants and align them as best as possible.

The keys that can be used:

  • Space
  • Enter
  • Down Arrow

The variants:

  • ComboBox
  • Dropdown
  • FilterableMultiselect
  • Multiselect

Examples

No response

Application/PAL

No response

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

@github-project-automation github-project-automation bot moved this to Triage in Roadmap Feb 17, 2023
@tay1orjones tay1orjones changed the title [Feature Request]: Align Dropdown / Combobox / Multiselect enter key behaviors [Feature Request]: Align Dropdown / Combobox / Multiselect enter key (open) behaviors Feb 23, 2023
@tay1orjones tay1orjones moved this from Triage to Now in Roadmap Feb 23, 2023
@tay1orjones tay1orjones moved this to ⏱ Backlog in Design System Feb 23, 2023
@tay1orjones tay1orjones added this to the 2023 Q1 milestone Feb 23, 2023
@kodiakhq kodiakhq bot closed this as completed in #13268 Mar 6, 2023
@github-project-automation github-project-automation bot moved this from Now to Not pursuing in Roadmap Mar 6, 2023
@github-project-automation github-project-automation bot moved this from ⏱ Backlog to ✅ Done in Design System Mar 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants