forked from DSpace/dspace-angular
-
Notifications
You must be signed in to change notification settings - Fork 34
Open
Labels
Description
Description of the bug
The scrollable dropdown component (DsDynamicScrollableDropdownComponent) has these usability issues:
- No visual indication of current selection: When opening the dropdown, the currently selected option is not highlighted/marked as active
- Broken keyboard navigation: Arrow keys don't properly navigate through all available options (including the "Clear selection" button)
To Reproduce
Quick Test Steps:
- Navigate to any form with a scrollable dropdown field
- Select an option from the dropdown and save
- Return to edit the form and open the same dropdown
- Expected: The currently selected option should be visually highlighted
- Actual: incorrect option appears selected/highlighted
- Try using arrow keys to navigate and Enter to select
- Expected: Arrow keys should navigate through all options including "Clear selection"
- Actual: Navigation skips the clear option and indexing is incorrect
Detailed Test Case: Dropdown Selection
Setup:
- Find any form with a scrollable dropdown
- Ensure the dropdown has multiple options
Test Steps:
- Select Initial Value: Choose any option from the dropdown (e.g., "Option A")
- Verify Current Selection: Open the same dropdown again
- Expected: "Option A" should be visually highlighted as the currently selected option
- Actual: Wrong option appears highlighted
- Change Selection: Select a different option (e.g., "Option B")
- Verify New Selection: Open the dropdown again
- Expected: "Option B" should now be highlighted
- Test Keyboard Navigation: Use arrow keys (↑/↓) to navigate through options
- Expected: Should navigate through all options including "Clear selection" button
- Actual: Navigation skips "Clear selection" options
Expected Results:
- The currently selected option is always correctly highlighted in the dropdown with
.activeclass - 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.htmldynamic-scrollable-dropdown.component.ts
Root cause:
- Missing logic to set
selectedIndexto 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