Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tracked by #2610
bjosttveit opened this issue Oct 29, 2024 · 1 comment
Open
Tracked by #2610
Labels
💡feature request react @digdir/designsystemet-react

Comments

@bjosttveit
Copy link
Member

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: Altinn/app-frontend-react#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

@Barsnes Barsnes added the react @digdir/designsystemet-react label Oct 30, 2024
@mimarz
Copy link
Collaborator

mimarz commented Oct 30, 2024

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💡feature request react @digdir/designsystemet-react
Projects
Status: 📄 Todo
Development

No branches or pull requests

3 participants