primefaces
MultiSelect - Keyboard Control Not Working Properly
Describe the bug
There is a bug with the keyboard control of the MultiSelect component. The keyboard navigation only partially works, as shown in the attached GIF. When the "chips" variant is enabled, I am unable to focus on individual checkboxes using the keyboard. I can select the parent checkbox that selects all options, but I cannot select individual options. The focus only highlights the parent element that wraps the individual checkboxes.
Reproducer
System Information
Environment
primereact: 10.9.6
react: 18.3.1
react-dom: 18.3.1
System Informations
OS: macOS Sequoia 15.5
Processor: M3 Pro
Memory: 18 GB
Node.js: v22.16.0
Steps to reproduce the behavior
Enable the "chips" variant on the MultiSelect component. Attempt to navigate through the checkboxes using the keyboard. Observe that the focus only reaches the parent checkbox and not the individual checkboxes.
Expected behavior
Using the keyboard, I should be able to control the entire component, not just a part of it. I should be able to focus on and select individual checkboxes.
I understand the confusion, but I think this might actually be working as intended rather than being a bug.
The reason individual checkboxes aren't Tab-focusable is for user experience - imagine if you had a MultiSelect with 100 options and had to Tab through every single checkbox to reach the next form field. That would be pretty frustrating!
The standard pattern (which follows WAI-ARIA guidelines) is to use arrow keys for navigation within the list. So once you're in the MultiSelect:
Use ↑/↓ to navigate options Use Enter/Space to select Use Tab to move to the next component This is actually how most major UI libraries handle it. The component is fully keyboard accessible, just in a different way than you might expect.
Ok, when I focus on the checkboxes wrapper and use the up and down arrow keys, it works. However, after I press Enter, nothing happens. When I press the spacebar, the whole page scrolls down. Is this a bug or a feature?
Multiselect components in various libraries behave better:
Material UI Multiselect works great, with solid keyboard support and accessibility. 🔗 Material UI Select
React Select It doesn’t have world-class accessibility, but keyboard control works reliably. 🔗 React Select
Chakra UI This library also provides working keyboard control for multiselect. 🔗 Chakra UI Select
👉 So, which library are you referring to? The one I’m using behaves oddly — Enter does nothing, and Space scrolls the entire page.
The arrow navigation works because the focus management is there, but pressing Enter/Space does nothing because the keydown handler is missing on the list items.
I just checked the code and indeed:
✅ Arrow navigation: Works (handled by the parent component) ❌ Enter/Space activation: Missing keydown handler ❌ Space scrolling page: Because the event isn't being prevented
This should be fixed by adding proper keyboard event handling to the individual items. The component needs to:
Listen for Enter/Space on the focused item Call the selection handler Prevent default behavior (stop page scroll)
So you were right to report this - it's a legitimate accessibility issue where keyboard users can navigate but can't actually select items. My earlier comment about "working as intended" was wrong in this case.
