Improve UX on the select dropdown
#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:
-
When opening the select dropdown, we now have a native scroll to the first selected option.
- I am using the native
scrollToElementfunction here to avoid any smooth scroll or animated scroll.
- I am using the native
-
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-selectedCSS 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.
- 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
-
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.
I removed the built assets in 77de92863d6423683019b066f4eacf8f20d46161 and 6cc1b1a00a6adff629ae6da2ca4fb5ff701d1fc8 to reduce merge conflicts
I plan to look at this in the following week, once this is in I think I'll cut a v11.2.0 release