From 62d577d688a32b8efab3abf5a3a583fe09e8cf2c Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Tue, 10 Sep 2024 22:02:40 +0300
Subject: [PATCH] fix: grid SSR works with initial topmost item index

---
 ...rid-initial-item-count-initial-topmost-item-index.tsx | 6 ++++++
 examples/grid-initial-item-count.tsx                     | 3 +--
 src/gridSystem.ts                                        | 6 +-----
 test/ssr.test.tsx                                        | 9 +++++++++
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 examples/grid-initial-item-count-initial-topmost-item-index.tsx

diff --git a/examples/grid-initial-item-count-initial-topmost-item-index.tsx b/examples/grid-initial-item-count-initial-topmost-item-index.tsx
new file mode 100644
index 000000000..a5c337c17
--- /dev/null
+++ b/examples/grid-initial-item-count-initial-topmost-item-index.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { VirtuosoGrid } from '../src'
+
+export function Example() {
+  return <VirtuosoGrid id="root" initialTopMostItemIndex={10} totalCount={20000} initialItemCount={30} />
+}
diff --git a/examples/grid-initial-item-count.tsx b/examples/grid-initial-item-count.tsx
index 3fc9eb704..6966f31fe 100644
--- a/examples/grid-initial-item-count.tsx
+++ b/examples/grid-initial-item-count.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { VirtuosoGrid, GridComponents, ListRange } from '../src'
+import { VirtuosoGrid, GridComponents, ListRange, GridStateSnapshot } from '../src'
 import { debounce } from 'lodash'
-import { GridStateSnapshot } from '../src/gridSystem'
 import { createHashRouter, Link, RouterProvider, useParams, useSearchParams } from 'react-router-dom'
 
 function fetchData(page: number) {
diff --git a/src/gridSystem.ts b/src/gridSystem.ts
index b74731d1a..34683352f 100644
--- a/src/gridSystem.ts
+++ b/src/gridSystem.ts
@@ -106,10 +106,7 @@ export const gridSystem = /*#__PURE__*/ u.system(
         u.filter(([_, location]) => !!location)
       ),
       () => {
-        // console.log('block rendering')
         u.publish(scrolledToInitialItem, false)
-        // topmost item index takes precedence over initial item count
-        u.publish(initialItemCount, 0)
       }
     )
 
@@ -235,8 +232,7 @@ export const gridSystem = /*#__PURE__*/ u.system(
 
             if (itemWidth === 0) {
               const startIndex = getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount)
-              // if the initial item count is set, we don't render the items from the initial item count.
-              const endIndex = startIndex === 0 ? Math.max(initialItemCount - 1, 0) : startIndex
+              const endIndex = Math.max(startIndex + initialItemCount - 1, 0)
               return buildProbeGridState(buildItems(startIndex, endIndex, data))
             }
 
diff --git a/test/ssr.test.tsx b/test/ssr.test.tsx
index 57267fbda..e6d4a2e15 100644
--- a/test/ssr.test.tsx
+++ b/test/ssr.test.tsx
@@ -25,6 +25,15 @@ describe('SSR List', () => {
   })
 
   it('renders 30 grid items with offset', () => {
+    const html = ReactDOMServer.renderToString(
+      <VirtuosoGrid id="root" initialTopMostItemIndex={10} totalCount={20000} initialItemCount={30} />
+    )
+    const { document } = new JSDOM(html).window
+    expect(document.querySelector('#root > div > div')!.childElementCount).toEqual(30)
+    expect(document.querySelector('#root > div > div > div')?.innerHTML).toEqual('Item 10')
+  })
+
+  it('renders 30 items with offset', () => {
     const html = ReactDOMServer.renderToString(
       <Virtuoso
         id="root"