cogsbox-state 0.5.405 → 0.5.407

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.405",
+  "version": "0.5.407",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",

package/src/CogsState.tsx

@@ -1805,6 +1805,9 @@ function createProxyHandler<T>(
           }
           // Simplified useVirtualView approach
           // Optimal approach - replace the useVirtualView implementation
+          // Complete useVirtualView implementation with comprehensive logging
+          // Complete fixed useVirtualView implementation
+          // Complete fixed useVirtualView implementation
           if (prop === "useVirtualView") {
             return (
               options: VirtualViewOptions
@@ -1822,7 +1825,7 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
-              const isUserScrollingRef = useRef(false);
+              const isProgrammaticScrollRef = useRef(false); // Track if we're scrolling programmatically
               const shouldStickToBottomRef = useRef(true);
               const scrollToBottomIntervalRef = useRef<NodeJS.Timeout | null>(
                 null
@@ -1882,18 +1885,10 @@ function createProxyHandler<T>(
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
               // Handle auto-scroll to bottom
-              const [hasMounted, setHasMounted] = useState(false);
-
-              // Add this effect to track mounting:
-              useEffect(() => {
-                setHasMounted(true);
-              }, []);
-
-              // Replace the auto-scroll effect with this version:
               useEffect(() => {
                 if (!stickToBottom || !containerRef.current || totalCount === 0)
                   return;
-                if (!shouldStickToBottomRef.current && hasMounted) return; // Only check shouldStickToBottom after mount
+                if (!shouldStickToBottomRef.current) return;
 
                 // Clear any existing interval
                 if (scrollToBottomIntervalRef.current) {
@@ -1906,11 +1901,19 @@ function createProxyHandler<T>(
                 const isBigJump = totalCount > range.endIndex + jumpThreshold;
 
                 if (isInitialLoad || isBigJump) {
-                  // Jump to show the last items immediately
-                  setRange({
+                  // Set programmatic scroll flag BEFORE changing range
+                  isProgrammaticScrollRef.current = true;
+
+                  const newRange = {
                     startIndex: Math.max(0, totalCount - 20),
                     endIndex: totalCount,
-                  });
+                  };
+                  setRange(newRange);
+
+                  // Reset flag after a delay to ensure scroll events are ignored
+                  setTimeout(() => {
+                    isProgrammaticScrollRef.current = false;
+                  }, 100);
                 }
 
                 // Keep scrolling to bottom until we're actually there
@@ -1928,19 +1931,18 @@ function createProxyHandler<T>(
                   const actualBottom = scrollHeight;
                   const isAtBottom = actualBottom - currentBottom < 5;
 
-                  console.log(
-                    `Scroll attempt ${attempts}: currentBottom=${currentBottom}, actualBottom=${actualBottom}, isAtBottom=${isAtBottom}, hasMounted=${hasMounted}`
-                  );
-
                   if (isAtBottom || attempts >= maxAttempts) {
                     clearInterval(scrollToBottomIntervalRef.current!);
                     scrollToBottomIntervalRef.current = null;
-                    console.log(
-                      isAtBottom ? "Reached bottom!" : "Timeout - giving up"
-                    );
                   } else {
-                    // Use instant scroll, not smooth
+                    // Set flag before scrolling
+                    isProgrammaticScrollRef.current = true;
                     container.scrollTop = container.scrollHeight;
+
+                    // Reset flag after a short delay
+                    setTimeout(() => {
+                      isProgrammaticScrollRef.current = false;
+                    }, 50);
                   }
                 }, 100);
 
@@ -1951,18 +1953,21 @@ function createProxyHandler<T>(
                     scrollToBottomIntervalRef.current = null;
                   }
                 };
-              }, [totalCount, stickToBottom, hasMounted]);
+              }, [totalCount, stickToBottom, range.startIndex, range.endIndex]);
 
               // Handle user scroll
               useEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                let scrollTimeout: NodeJS.Timeout;
-
                 const handleScroll = () => {
+                  // Ignore programmatic scrolls
+                  if (isProgrammaticScrollRef.current) {
+                    return;
+                  }
+
+                  // This is a real user scroll
                   if (scrollToBottomIntervalRef.current) {
-                    // Stop auto-scrolling if user scrolls
                     clearInterval(scrollToBottomIntervalRef.current);
                     scrollToBottomIntervalRef.current = null;
                   }
@@ -1971,16 +1976,9 @@ function createProxyHandler<T>(
                   const isAtBottom =
                     scrollHeight - scrollTop - clientHeight < 10;
 
-                  // Update whether we should stick to bottom
+                  // Only update this for real user scrolls
                   shouldStickToBottomRef.current = isAtBottom;
 
-                  // Mark as user scrolling
-                  clearTimeout(scrollTimeout);
-                  isUserScrollingRef.current = true;
-                  scrollTimeout = setTimeout(() => {
-                    isUserScrollingRef.current = false;
-                  }, 150);
-
                   // Update visible range
                   let startIndex = 0;
                   for (let i = 0; i < positions.length; i++) {
@@ -2012,29 +2010,36 @@ function createProxyHandler<T>(
 
                 return () => {
                   container.removeEventListener("scroll", handleScroll);
-                  clearTimeout(scrollTimeout);
                 };
               }, [positions, totalCount, itemHeight, overscan]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "auto") => {
                   shouldStickToBottomRef.current = true;
+                  isProgrammaticScrollRef.current = true;
                   if (containerRef.current) {
                     containerRef.current.scrollTop =
                       containerRef.current.scrollHeight;
                   }
+                  setTimeout(() => {
+                    isProgrammaticScrollRef.current = false;
+                  }, 100);
                 },
                 []
               );
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
+                  isProgrammaticScrollRef.current = true;
                   if (containerRef.current && positions[index] !== undefined) {
                     containerRef.current.scrollTo({
                       top: positions[index],
                       behavior,
                     });
                   }
+                  setTimeout(() => {
+                    isProgrammaticScrollRef.current = false;
+                  }, 100);
                 },
                 [positions]
               );