SelectableList now only forces a scroll when the selected item is changed

src/components/common/SelectableList.tsx

@@ -14,6 +14,7 @@ export const SelectableList = <T,>(
 
   const listRef = useRef<HTMLUListElement | null>(null);
   const isFocusedRef = useRef(false);
+  const prevSelectedValueRef = useRef<T | null | undefined>(selectedValue);
 
   const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
 
@@ -51,10 +52,27 @@ export const SelectableList = <T,>(
     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 (
     <ul
       ref={listRef}