-
Couldn't load subscription status.
- Fork 0
IBX-10836: Fix focus in dropdown #71
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
Conversation
f0bea4d to
269598c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR enhances keyboard navigation and focus management in dropdown components. The changes address focus handling issues where users could navigate to non-interactable selected items, and adds hover/focus styling for multi-select dropdowns.
Key Changes:
- Implemented customizable focus navigation logic with
getNextFocusableItemcallback - Added Tab key support for dropdown navigation
- Simplified
InputTextInputref handling by exposing native HTMLInputElement
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ItemsContainer.types.ts | Defines types for custom focus navigation including direction enum and callback type |
| ItemsContainer.tsx | Implements moveActiveFocus function and refactors keyboard navigation to use new focus system |
| BaseDropdown.types.ts | Adds optional getNextFocusableItem prop to BaseDropdown interface |
| BaseDropdown.tsx | Passes through getNextFocusableItem to ItemsContainer with default no-op implementation |
| InputTextInput.types.ts | Changes ref type from custom interface to native HTMLInputElement |
| InputTextInput.tsx | Removes custom ref wrapper and exposes native input element directly |
| focus.ts | New utility implementing generic focus navigation logic for dropdown items |
| DropdownSingleInput.tsx | Implements custom focus logic excluding selected items, adds check icon to selected item |
| DropdownSingleInput.stories.tsx | Updates story values to match new ID format |
| DropdownMultiInput.tsx | Implements focus logic targeting checkbox elements, reorders imports |
| DropdownMultiInput.stories.tsx | Updates story values and adds new story for multiple selections |
| _dropdown.scss | Adds hover/focus styles for multi-dropdown and layout improvements for single dropdown items |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/components/src/components/Dropdown/DropdownSingleInput/DropdownSingleInput.tsx
Show resolved
Hide resolved
packages/components/src/components/Dropdown/DropdownMultiInput/DropdownMultiInput.tsx
Show resolved
Hide resolved
| extraParams: ExtraParamsType, | ||
| ): HTMLElement | null => { | ||
| const focusableElements = getFocusableElements(extraParams); | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ); | ||
| const moveActiveFocus = (event: KeyboardEvent, direction: ItemsContainerMoveActiveFocusDirection) => { | ||
| if (isOpen) { | ||
| event.preventDefault(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| event.preventDefault(); | |
| event.preventDefault(); | |
269598c to
2d40189
Compare
Description:
For QA:
Documentation: