Skip to content

Scrollable dropdown doesn't highlight current selection & keyboard navigation is broken #127

@solomona2003

Description

@solomona2003

Description of the bug

The scrollable dropdown component (DsDynamicScrollableDropdownComponent) has these usability issues:

  1. No visual indication of current selection: When opening the dropdown, the currently selected option is not highlighted/marked as active
  2. Broken keyboard navigation: Arrow keys don't properly navigate through all available options (including the "Clear selection" button)

To Reproduce

Quick Test Steps:

  1. Navigate to any form with a scrollable dropdown field
  2. Select an option from the dropdown and save
  3. Return to edit the form and open the same dropdown
  4. Expected: The currently selected option should be visually highlighted
  5. Actual: incorrect option appears selected/highlighted
  6. Try using arrow keys to navigate and Enter to select
  7. Expected: Arrow keys should navigate through all options including "Clear selection"
  8. Actual: Navigation skips the clear option and indexing is incorrect

Detailed Test Case: Dropdown Selection

Setup:

  1. Find any form with a scrollable dropdown
  2. Ensure the dropdown has multiple options

Test Steps:

  1. Select Initial Value: Choose any option from the dropdown (e.g., "Option A")
  2. Verify Current Selection: Open the same dropdown again
  3. Expected: "Option A" should be visually highlighted as the currently selected option
  4. Actual: Wrong option appears highlighted
  5. Change Selection: Select a different option (e.g., "Option B")
  6. Verify New Selection: Open the dropdown again
  7. Expected: "Option B" should now be highlighted
  8. Test Keyboard Navigation: Use arrow keys (↑/↓) to navigate through options
  9. Expected: Should navigate through all options including "Clear selection" button
  10. Actual: Navigation skips "Clear selection" options

Expected Results:

  • The currently selected option is always correctly highlighted in the dropdown with .active class
  • After changing selections, the new option is properly highlighted
  • Keyboard navigation works smoothly through all available options
  • This behavior is consistent across all scrollable dropdowns

Technical Details

Component affected: DsDynamicScrollableDropdownComponent
Files involved:

  • dynamic-scrollable-dropdown.component.html
  • dynamic-scrollable-dropdown.component.ts

Root cause:

  • Missing logic to set selectedIndex to match current value when dropdown opens
  • Incorrect index calculation when "Clear selection" button is present (options need +1 offset)
  • scrollToSelected() includes disabled items in selection

Proposed solution:

  • Add setSelectedIndexToCurrentValue() method to highlight current selection on dropdown open
  • Treat "Clear selection" as index 0, shift regular options to index+1
  • Update keyboard navigation to handle the full range including clear button
  • Fix Enter key logic to handle clear selection (index 0) vs regular options

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions