starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #2721] [MERGED] Add keyboard navigation to multi-select components #3779

New Issue
Closed
opened 2026-04-25 00:17:02 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:17:02 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/2721
Author: @mikiher
Created: 3/8/2024
Status: ✅ Merged
Merged: 3/10/2024
Merged by: @advplyr

Base: master ← Head: keyboard-navigation-2

📝 Commits (4)

  • a5772f6 Add keyboard navigation to multi-select components
  • b934a75 Merge branch 'master' into keyboard-navigation-2
  • fa71f9d Merge master
  • 727dad7 Update multi select highlight color to yellow, remove console logs

📊 Changes

2 files changed (+125 additions, -15 deletions)

View changed files

📝 client/components/ui/MultiSelect.vue (+72 -11)
📝 client/components/ui/MultiSelectQueryInput.vue (+53 -4)

📄 Description

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.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/2721 **Author:** [@mikiher](https://github.com/mikiher) **Created:** 3/8/2024 **Status:** ✅ Merged **Merged:** 3/10/2024 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `keyboard-navigation-2` --- ### 📝 Commits (4) - [`a5772f6`](https://github.com/advplyr/audiobookshelf/commit/a5772f6b66c38c8d6589374d042f8f8a629ac561) Add keyboard navigation to multi-select components - [`b934a75`](https://github.com/advplyr/audiobookshelf/commit/b934a755b5e656ec64460c55ff21346e4fe10ff1) Merge branch 'master' into keyboard-navigation-2 - [`fa71f9d`](https://github.com/advplyr/audiobookshelf/commit/fa71f9db2e46db8770892c0800e5160b48004a67) Merge master - [`727dad7`](https://github.com/advplyr/audiobookshelf/commit/727dad7e195b22e182789dc55f72ce9433471da2) Update multi select highlight color to yellow, remove console logs ### 📊 Changes **2 files changed** (+125 additions, -15 deletions) <details> <summary>View changed files</summary> 📝 `client/components/ui/MultiSelect.vue` (+72 -11) 📝 `client/components/ui/MultiSelectQueryInput.vue` (+53 -4) </details> ### 📄 Description 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. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:17:02 +02:00
adam closed this issue 2026-04-25 00:17:02 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#3779
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?