How to replicate Base UI's "stable selection" behavior for Select?

[boboshan]

Hi everyone,

I'm trying to implement a specific behavior for the select component that I really like from Base UI's Select.

The Desired Behavior:

In the Base UI Select component, the dropdown list automatically scrolls to keep the selected item aligned with the trigger.

On Open: The list scrolls so the currently selected item appears directly where the trigger was.

The key effect is that the user's focal point remains stable, which creates a very smooth experience.

You can also try it live on their documentation page: base-ui Select

I'm not sure if there's a built-in or more idiomatic "Zag.js way" to handle this. Any advice or examples would be fantastic.

Thanks!

[segunadebayo]

This will require some modifications to the positioning logic to make it work. But it’s possible and a nice to have.