cogsbox-state 0.5.337 → 0.5.339

package/package.json

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

package/src/CogsState.tsx

@@ -1871,34 +1871,42 @@ function createProxyHandler<T>(
                   validIndices,
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
-              useEffect(() => {
-                if (stickToBottom && totalCount > 0 && containerRef.current) {
-                  // When count increases, immediately adjust range to show bottom
-                  const container = containerRef.current;
-                  const visibleCount = Math.ceil(
-                    container.clientHeight / itemHeight
-                  );
-
-                  // Set range to show the last items including the new one
-                  setRange({
-                    startIndex: Math.max(
-                      0,
-                      totalCount - visibleCount - overscan
-                    ),
-                    endIndex: totalCount,
-                  });
-
-                  // Then scroll to bottom after a short delay
-                  setTimeout(() => {
-                    container.scrollTop = container.scrollHeight;
-                  }, 100);
-                }
-              }, [totalCount]);
+              // useEffect(() => {
+              //   if (stickToBottom && totalCount > 0 && containerRef.current) {
+              //     // When count increases, immediately adjust range to show bottom
+              //     const container = containerRef.current;
+              //     const visibleCount = Math.ceil(
+              //       container.clientHeight / itemHeight
+              //     );
+
+              //     // Set range to show the last items including the new one
+              //     setRange({
+              //       startIndex: Math.max(
+              //         0,
+              //         totalCount - visibleCount - overscan
+              //       ),
+              //       endIndex: totalCount,
+              //     });
+
+              //     // Then scroll to bottom after a short delay
+              //     setTimeout(() => {
+              //       container.scrollTop = container.scrollHeight + 9999;
+              //     }, 200);
+              //   }
+              // }, [totalCount]);
               // This is the main effect that handles all scrolling and updates.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
+                // --- STEP 1: Remember if we were scrolled to the bottom BEFORE this render ---
+                // We check this now, before the new items might have pushed the scrollbar up.
+                const wasScrolledToBottom =
+                  container.scrollHeight -
+                    container.scrollTop -
+                    container.clientHeight <
+                  itemHeight;
+
                 // This function determines what's visible in the viewport.
                 const updateVirtualRange = () => {
                   if (!container) return;
@@ -1925,19 +1933,19 @@ function createProxyHandler<T>(
                   }
                   endIndex = Math.min(totalCount, endIndex + overscan);
 
+                  // Update the state to render the correct slice
                   setRange({ startIndex, endIndex });
                 };
 
                 // This function handles ONLY user-initiated scrolls.
                 const handleUserScroll = () => {
-                  // The key: check if we are scrolled to the bottom.
+                  // When the user scrolls, update the ref so we know their intent for the *next* update.
                   isLockedToBottomRef.current =
                     container.scrollHeight -
                       container.scrollTop -
                       container.clientHeight <
                     1;
-
-                  // After any scroll, update what's visible.
+                  // Then, just render what's visible at the new position.
                   updateVirtualRange();
                 };
 
@@ -1946,15 +1954,17 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // --- THE AUTO-SCROLL LOGIC ---
-                // This checks if we should auto-scroll *after* a render has occurred.
-                if (stickToBottom && isLockedToBottomRef.current) {
-                  // If we were at the bottom before this new item was added,
-                  // scroll to the new bottom.
-                  container.scrollTop = container.scrollHeight + 999999999;
+                // --- STEP 2: Apply the scroll AFTER the render, based on what we remembered ---
+                if (
+                  stickToBottom &&
+                  (isLockedToBottomRef.current || wasScrolledToBottom)
+                ) {
+                  // If we are "locked" OR if we were at the bottom just before this render,
+                  // then scroll to the new bottom. This handles both initial load and new items.
+                  container.scrollTop = container.scrollHeight;
                 }
 
-                // Always calculate the initial visible range.
+                // Always calculate the visible range after any potential scroll changes.
                 updateVirtualRange();
 
                 // Cleanup function is vital to prevent memory leaks.