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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions