-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
Feature request
Overview
Currently, Radix Select automatically scrolls to the selected item when value is set, but when no value is selected, the list always opens from the top.
In many UX scenarios (especially time pickers or long lists), it would be useful to set a custom initial scroll position when opening the Select without selecting an item.
I’m requesting a new option (e.g., initialScrollTo) that allows developers to define where the Select content should scroll to before user interaction, even when value="".
This avoids needing manual hacks with setTimeout + portal DOM querying.
Examples in other libraries
Several UI libraries support customizing initial scroll behavior:
- MUI Autocomplete / Select: exposes ListboxProps so developers can imperatively control scroll position.
- React Aria: offers hooks to control listbox scroll behavior on open.
- Headless UI: scrolls to active option even when not selected, and allows overriding that behavior.
This is a common requirement in time pickers, schedulers, long enum lists, and other interfaces where users expect the dropdown to open near a relevant position (e.g., “10:00” for time selection).
Who does this impact? Who is this for?
This feature benefits:
- Developers building time pickers, date/time schedulers, or long lists
- Applications with extensive selection ranges (e.g., 00:00–23:30)
- Users who otherwise need to scroll large distances before selecting an option
- Accessibility-focused teams, since reducing excessive scroll is a major usability improvement
Overall, this impacts both beginners (who want simple configuration) and advanced users (who want fine-grained control over scroll behavior).
Additional context
Because Select content renders inside a Portal, the only current workaround is:
setTimeout(() => {
document
.querySelector("[data-slot='select-item'][data-value='10:00']")
?.scrollIntoView({ block: "center" });
}, 10);This approach:
- Depends on timing
- Breaks if internal DOM structure changes
- Is not SSR-friendly
- Adds complexity for a common UX scenario
A built-in prop would provide a cleaner, safer, and more accessible way to control initial scroll behavior when the list opens without a selected value.
Thank you for maintaining Radix UI—this would be a meaningful improvement to the Select experience!