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

[bjosttveit]

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.

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]

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

[Barsnes]

Hi, can you check if this issue still occurs on Suggestion? https://storybook.designsystemet.no/?path=/docs/komponenter-suggestion--docs Unless you choose to add a custom filter, all other values will be hidden by default.

[bjosttveit]

I have not tested this in app-frontend yet, but the behavior in story book when choosing not to filter the list looks good 🙌

@Magnusrm Have you upgraded the Comboboxes on the date-picker? Have you tried removing the workaround?

[Magnusrm]

I used Select instead since the docs say that Suggestion still is experimental. Also, are the docs correct? I cant find an "exported member" called EXPERIMENTAL_Suggestion. And while i can find Suggestion, Suggestion.Option and Suggestion.List does not seem to exist. (On version 1.0.0)

EDIT: I found EXPERIMENTAL_Suggestion now. I'll see if i can use that 😁

[bjosttveit]

Use whatever works best, Select or Suggestion or whatever, as long as the ux with a long list of options works well we don't really need search capabilities for this

[mrosvik]

We’re closing this issue because Combobox is deprecated. It has been replaced by Suggestion.