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

Add keyboard navigation to multi-select components #2721

Merged
merged 4 commits into from
Mar 10, 2024

Conversation

mikiher
Copy link
Contributor

@mikiher mikiher commented Mar 8, 2024

This (partially) fixes #2555

Adds support for keyboard navigation and selection in the dropdown menu of multi-select components.

Details:

  • Support is added for ArrowDown and ArrowUp for navigation
    • ArrowDown/Up highlights the next/previous menu item
  • By default, no menu item is highlighted
    • If no menu item is highlighted, Enter simply adds the current text input to the selected list
    • If a menu item is highlighted, Enter adds/removes the highlighted item to/from the selected list
  • Highlighted menu element is marked with text-sky-400 (blue text color)
  • Menu scrolling is properly supported
    • After ArrowDown/Up, scroll position is modified to keep the highlighed item visible.
  • Mouse navigation and selection continues to work normally as expected

Notes:

  1. Using blue text color for highlighting seemed like a reasonable choice, but I'm not a designer - I'll change it to whatever you think is best.
  2. There's some refacroring work required to make this code more reusable. I'll do it in a future PR.

@mikiher mikiher marked this pull request as ready for review March 8, 2024 07:25
@advplyr
Copy link
Owner

advplyr commented Mar 10, 2024

I updated the highlight to yellow-300 in keeping with the theme color. It is working great for me, thanks!

@advplyr advplyr merged commit 9e44fe5 into advplyr:master Mar 10, 2024
1 check passed
@mikiher mikiher deleted the keyboard-navigation-2 branch March 14, 2024 23:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Enhancement]: Allow keyboard navigation and selection in drop-down lists
2 participants