Choices icon indicating copy to clipboard operation
Choices copied to clipboard

Improve UX on the select dropdown

Open zoglo opened this issue 1 month ago • 2 comments

#1339 introduced the selected option being correctly highlighted when opening the dropdown but did not account for the option also being visible when opening the dropdown, leading to bad UX (unsure if selected or not).

This PR thus introduces the following bug fixes and some other behavior changes to improve UX and make the select act more native:

  1. When opening the select dropdown, we now have a native scroll to the first selected option.

    • I am using the native scrollToElement function here to avoid any smooth scroll or animated scroll.
  2. The selected state will always be visible; the hover (highlighted) state will be additionally visible.

    • Previously when hovering over any item, we lost focus of the checked options. This has now been changed by making use of the yet unused is-selected CSS class. It should now match the same behaviour as other libraries (e.g., SlimSelect). I also made sure to exclude the "Press to select" from the styles on already selected options, as this hint does not make sense here.
  3. When closing the dropdown, the hovered (highlighted) choices will be reset, matching the native <select> behaviour.

    • We previously left the last hovered choices highlighted, which could confuse users when reopening the dropdown not showing the selected option.

Screenshots (if appropriate)

The following video should show all behavioral changes

https://github.com/user-attachments/assets/d633a7ab-a723-40b1-8a12-589695f3253f

Types of changes

  • [ ] Chore (tooling change or documentation change)
  • [x] Refactor (non-breaking change which maintains existing functionality)
  • [x] Bug fix (non-breaking change which fixes an issue)
  • [x] New feature (non-breaking change which adds functionality)
  • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • [x] My code follows the code style of this project.
  • [ ] I have added new tests for the bug I fixed/the new feature I added.
  • [ ] I have modified existing tests for the bug I fixed/the new feature I added.
  • [ ] My change requires a change to the documentation.
  • [ ] I have updated the documentation accordingly.

zoglo avatar Nov 27 '25 14:11 zoglo

I removed the built assets in 77de92863d6423683019b066f4eacf8f20d46161 and 6cc1b1a00a6adff629ae6da2ca4fb5ff701d1fc8 to reduce merge conflicts

zoglo avatar Nov 27 '25 22:11 zoglo

I plan to look at this in the following week, once this is in I think I'll cut a v11.2.0 release

Xon avatar Nov 29 '25 15:11 Xon