Skip to content

Fix Dropdown scrollbar, arrow navigation, and scroll speed#701

Merged
rzueger merged 1 commit intodevelopfrom
fix/dropdown-scrollbar-and-navigation
Apr 16, 2026
Merged

Fix Dropdown scrollbar, arrow navigation, and scroll speed#701
rzueger merged 1 commit intodevelopfrom
fix/dropdown-scrollbar-and-navigation

Conversation

@rzueger
Copy link
Copy Markdown
Member

@rzueger rzueger commented Apr 16, 2026

Summary

  • Scrollbar click closing the menu: clicking the scrollbar of the options list caused the input to blur, hiding the menu. Fixed with preventDefault on OptionsContainer mousedown to keep focus on the input, plus explicit setInputFocused(false) on selection so options still close after picking a value.
  • Arrow keys navigating past rendered options: keyboard navigation iterated through all filtered options, but only the first optionsRenderLimit are rendered. Pressing arrow down past the last rendered option moved focus to invisible items. Fixed by slicing the navigation array to match the render limit.
  • Slow scroll-into-view: the scroll-into-view library defaults to 1000ms animation. Reduced to 50ms for responsive keyboard navigation with just enough motion to maintain spatial context.
  • Weak arrow key tests: replaced element-existence assertions (which always pass) with behavioral tests that verify arrow + Enter produces the correct selection. Added tests for the render limit boundary and scrollbar interaction. Dropdown test coverage: 84% → 95% statements, 74% → 89% branches.

Test plan

  • npm test — 1749 tests pass
  • npm run typecheck — clean
  • Manual testing: scrollbar interaction keeps menu open, arrow keys wrap within rendered options, scroll follows focus instantly
  • Cypress E2E — Dropdown exercised by departure/arrival wizard specs

Clicking the scrollbar of the options list caused it to
disappear because the input blur hid the menu. Prevent
focus loss with preventDefault on the options container
mousedown, and explicitly close the menu on selection.

Arrow key navigation could move focus beyond the rendered
options (past optionsRenderLimit) into invisible territory.
Limit navigation to the rendered slice.

Reduce scroll-into-view animation from 1000ms to 50ms so
keyboard navigation feels responsive.

Strengthen Dropdown tests to verify arrow key behavior
through observable side effects (arrow + Enter = selection)
instead of element-existence checks that always pass.
@rzueger rzueger merged commit bade644 into develop Apr 16, 2026
2 checks passed
@rzueger rzueger deleted the fix/dropdown-scrollbar-and-navigation branch April 16, 2026 09:02
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.

1 participant