Skip to content

Conversation

@Luko248
Copy link

@Luko248 Luko248 commented Oct 23, 2025

Description

Fixes #8102

This PR improves keyboard navigation and scrolling behavior in MultiSelect component:

  • Prevent page scroll on Space when wrapper has focus
  • ArrowUp/Down enter and move options from wrapper
  • Auto-scroll wrapper to keep focused option visible (both directions)
  • Escape closes and returns focus to trigger
  • Add onKeyDown+tabIndex to wrapper/virtual list; data-p-index on items

Changes

  • Enhanced keyboard navigation from wrapper element
  • Improved auto-scrolling to keep focused options visible
  • Better focus management when closing with Escape key
  • Added necessary attributes for accessibility (tabIndex, data-p-index)

Type of change

  • Bug fix (non-breaking change which fixes an issue)

Testing

Please test keyboard navigation in MultiSelect component:

  1. Open MultiSelect panel
  2. Use Arrow keys to navigate through options
  3. Press Space to select/deselect
  4. Verify auto-scrolling works correctly
  5. Press Escape to close and verify focus returns to trigger

… from wrapper

  - Prevent page scroll on Space when wrapper has focus
  - ArrowUp/Down enter and move options from wrapper
  - Auto-scroll wrapper to keep focused option visible (both directions)
  - Escape closes and returns focus to trigger
  - Add onKeyDown+tabIndex to wrapper/virtual list; data-p-index on items
@melloware melloware added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Oct 24, 2025
@melloware
Copy link
Member

set to PrimeTek to review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Status: Pending Review Issue or pull request is being reviewed by Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MultiSelect - Keyboard Control Not Working Properly

3 participants