The list doesn't scroll to the top on input

[Khavrolev]

When you start typing country's name, the list doesn't scroll to the top. It leads to some UX problems

Monosnap.screencast.2024-12-18.17-46-26.mp4

[MDmubarak786]

` // Use state to force re-render of the list when search changes
const [searchValue, setSearchValue] = React.useState("")
const scrollAreaRef = React.useRef(null)

// Find the actual scrollable element within the ScrollArea component
const resetScroll = React.useCallback(() => {
// Allow a small delay for the DOM to update
setTimeout(() => {
if (scrollAreaRef.current) {
// Find the scrollable element (usually has overflow-y: auto/scroll)
const scrollableElement = scrollAreaRef.current.querySelector(
"[data-radix-scroll-area-viewport]"
)
if (scrollableElement) {
;(scrollableElement as HTMLElement).scrollTop = 0
}
}
}, 10)
}, [])
`

<CommandInput placeholder="Search country..." value={searchValue} onValueChange={(value) => { setSearchValue(value) resetScroll() }} />