Skip to content

Feature request: Allow customizing the initial scroll position of Select #3758

@minseonkkim

Description

@minseonkkim

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions