diff --git a/src/components/common/SelectableList.tsx b/src/components/common/SelectableList.tsx index 06f605b..3ed2837 100644 --- a/src/components/common/SelectableList.tsx +++ b/src/components/common/SelectableList.tsx @@ -14,6 +14,7 @@ export const SelectableList = ( const listRef = useRef(null); const isFocusedRef = useRef(false); + const prevSelectedValueRef = useRef(selectedValue); const itemRefs = useRef<(HTMLLIElement | null)[]>([]); @@ -51,10 +52,27 @@ export const SelectableList = ( const el = itemRefs.current[index]; if (el) { el.focus({ preventScroll: false }); - el.scrollIntoView({ block: "nearest" }); } }, [items, selectedValue]); + // Separate effect for scrolling - only when selection changes + useEffect(() => { + // Only scroll if the selected value actually changed + if (prevSelectedValueRef.current === selectedValue) return; + + prevSelectedValueRef.current = selectedValue; + + if (!selectedValue) return; + + const index = items.indexOf(selectedValue); + if (index < 0) return; + + const el = itemRefs.current[index]; + if (el) { + el.scrollIntoView({ block: "nearest", behavior: "smooth" }); + } + }, [selectedValue, items]); + return (