The highlighted select item goes out of view, and it's not visible which item is highlighted

[babakfp]

Hi 👋

Recording.2025-04-10.230500.mp4

White items are hovered items.
Yellow items are items that are focused with keyboard.

When using keyboard up and down, I would expect the scrollbar to not move normally. If I press down and the item is visible, then don't change the scrollbar position, and if the item is not visible, then scroll down (the amount of the height of the next item) and focus on the item.

(the focused item lags behind the scrollbar).

Recording.2025-04-10.234721.mp4

[segunadebayo]

The browser manages this since we use block: nearest in the scroll into view options.

scrollIntoView(optionEl, { rootEl: contentEl, block: "nearest" })

Customizing this may help achieve your desired experience.

CleanShot.2025-04-11.at.00.03.04.mp4

[babakfp]

Hey 👋

I couldn't get it working 😅

https://github.com/babakfp/chakra-ui--zag--discussions--2407/blob/830263f6d6b616b1cdfe36aa060d0d1468ad7d1e/src/routes/%2Bpage.svelte

I don't know what I'm doing wrong 🤷‍♂️

It would be nice to have it as a simple boolean option? (making it default is better IMO).