From f4add101ef027f49a90fdf2d9146801a9d1ac74b Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Tue, 19 Mar 2024 21:34:37 +0200
Subject: [PATCH] fix: props race condition with initial topmost

---
 .../initial-topmost-item-default-height.tsx   | 92 ++++++++++++++++++-
 src/followOutputSystem.ts                     |  5 +-
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/examples/initial-topmost-item-default-height.tsx b/examples/initial-topmost-item-default-height.tsx
index 5c653358a..951008168 100644
--- a/examples/initial-topmost-item-default-height.tsx
+++ b/examples/initial-topmost-item-default-height.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { Virtuoso } from '../src'
+import { LogLevel, Virtuoso } from '../src'
 
 //
 const itemContent = (index: number) => <div style={{ height: index % 2 ? 30 : 20, background: 'white' }}>Item {index}</div>
+
 export function Example() {
   return (
     <div>
@@ -11,3 +12,92 @@ export function Example() {
     </div>
   )
 }
+
+function useSuppressResizeObserverError() {
+  React.useEffect(() => {
+    const cb = (e: ErrorEvent) => {
+      if (e.message === 'ResizeObserver loop completed with undelivered notifications.') {
+        e.preventDefault()
+      }
+    }
+    window.addEventListener('error', cb)
+    return () => {
+      window.removeEventListener('error', cb)
+    }
+  }, [])
+}
+
+export function BombProps() {
+  // const [channelId, setChannelId] = React.useState(1);
+  useSuppressResizeObserverError()
+  const [bogus, setBogus] = React.useState(0)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setBogus((prev) => prev + 1)
+      setTimeout(() => {
+        setBogus((prev) => prev + 1)
+        setTimeout(() => {
+          setBogus((prev) => prev + 1)
+          setTimeout(() => {
+            setBogus((prev) => prev + 1)
+          }, 2)
+        }, 2)
+      }, 2)
+    }, 2)
+  }, [])
+
+  return (
+    <div className="App">
+      {/*
+      <button
+        onClick={() => {
+          setChannelId(1);
+        }}
+      >
+        Channel 1
+      </button>
+
+      <button
+        onClick={() => {
+          setChannelId(2);
+        }}
+      >
+        Channel 2
+      </button>
+
+      <button
+        onClick={() => {
+          setChannelId(3);
+        }}
+      >
+        Channel 3
+      </button>
+      */}
+
+      <Virtuoso
+        logLevel={LogLevel.DEBUG}
+        totalCount={15}
+        context={{ bogus }}
+        defaultItemHeight={50}
+        itemContent={(index: number) => {
+          return (
+            <div
+              style={{
+                height: index % 2 ? 200 : 100,
+                background: index % 2 ? 'red' : 'blue',
+              }}
+            >
+              Item {index}
+            </div>
+          )
+        }}
+        initialTopMostItemIndex={14}
+        alignToBottom={true}
+        followOutput="auto"
+        increaseViewportBy={100}
+        style={{ height: 800 }}
+      />
+    </div>
+  )
+}
diff --git a/src/followOutputSystem.ts b/src/followOutputSystem.ts
index fe0ee7edf..3ec20dc6b 100644
--- a/src/followOutputSystem.ts
+++ b/src/followOutputSystem.ts
@@ -102,7 +102,10 @@ export const followOutputSystem = u.system(
         u.withLatestFrom(followOutput, totalCount)
       ),
       ([, followOutput]) => {
-        trapNextSizeIncrease(followOutput !== false)
+        // activate adjustment only if the initial item is already scrolled to
+        if (u.getValue(scrolledToInitialItem)) {
+          trapNextSizeIncrease(followOutput !== false)
+        }
       }
     )