Skip to content

Conversation

@GrabowskiM
Copy link
Contributor

🎫 Issue IBX-10836

Description:

  1. Added focus/hover for multidropdown
  2. Fixed stories after prev change to generating items
  3. Fixed bug that you could focus with keyboard to selected field (which is not interactable)

For QA:

Documentation:

@GrabowskiM GrabowskiM requested review from a team and Copilot October 20, 2025 15:06
Copy link

Copilot AI left a 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 getNextFocusableItem callback
  • Added Tab key support for dropdown navigation
  • Simplified InputTextInput ref 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.

extraParams: ExtraParamsType,
): HTMLElement | null => {
const focusableElements = getFocusableElements(extraParams);

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

);
const moveActiveFocus = (event: KeyboardEvent, direction: ItemsContainerMoveActiveFocusDirection) => {
if (isOpen) {
event.preventDefault();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
event.preventDefault();
event.preventDefault();

@dew326 dew326 merged commit cd77299 into main Oct 27, 2025
4 checks passed
@dew326 dew326 deleted the IBX-10836-fix-focus branch October 27, 2025 07:11
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.

4 participants