search

digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
85 stars 38 forks source link

Scroll to selected item when opening `Combobox` with `multiple: false` #2702

Open bjosttveit opened 1 month ago

bjosttveit commented 1 month ago

Description

We would like the ability to have the selected option visible (scrolling to it) when opening a combobox that only allows a single selected value. The specific use case here is a dropdown for selecting the year in our new Datepicker component. There can potentially be a lot of years that are allowed to select, and you usually want to select something close to the current year. Its also best to show years in chronological order. Since we by default allow selecting ±100 years, this results in the year 2124 being shown first when opening the dropdown, and the user has to scroll very far to find the current year.

image

This was reported to us as a bug after releasing the our new Datepicker: https://github.com/Altinn/app-frontend-react/issues/2637

We managed to create a workaround for this, but we had to get very creative as it seems impossible to wrap a Combobox.Option component due to useCombobox checking that the type is ComboboxOption.

Workaround: https://github.com/Altinn/app-frontend-react/pull/2625/files#diff-00f3c7200fc2104ce2875b9ab8ba865cd2d558456b7522ea4a897b15ba7803d4R119-R145

Additional Information

No response

mimarz commented 1 month ago

Thanks for requesting this feature!

We have planned to do some improvements on the Combobox soon on the next version so I have added it to the list of features we are going to have a look at for then :)