@lotics/ui 42.3.0 → 43.0.0

package/src/use_option_list.ts

@@ -252,6 +252,25 @@ export function useOptionList<T extends string, MULTI extends boolean = false, D
     if (index >= 0) scrollRef.current?.scrollTo({ y: index * OPTION_HEIGHT - 80, animated: false });
   }, []);
 
+  // Scroll the OPENING seat into view.
+  //
+  // `initialIndex` seats the highlight through `useState`, which fires no
+  // `onActiveChange` — so the row it lands on was highlighted and never scrolled
+  // to. On a list short enough to fit that is invisible; past a screenful the
+  // list opens at the top with the current value somewhere below the fold, which
+  // is the one row it was opened to show. A day of times at 15-minute steps is 96
+  // rows, so an afternoon value sat two thirds of the way down an unscrolled list.
+  //
+  // Gated on rows ARRIVING rather than on mount, so an async list (options still
+  // loading when the popover opens) seats on its real value instead of on the
+  // empty list's index 0. Once only: after that the member owns the scroll.
+  const scrollSeatedRef = useRef(false);
+  useEffect(() => {
+    if (scrollSeatedRef.current || rows.length === 0) return;
+    scrollSeatedRef.current = true;
+    scrollToIndex(initialActiveIndex);
+  }, [rows.length, initialActiveIndex, scrollToIndex]);
+
   const requestClose = useCallback(() => {
     onRequestClose?.();
     if (onClose) {