Fix InfiniteScroll scroll preservation (#2689)

* Fix `InfiniteScroll` scroll preservation

* Added test

---------

Co-authored-by: Pascal Baljet <[email protected]>

Author: skryukov

packages/core/src/domUtils.ts

@@ -1,4 +1,9 @@
 const elementInViewport = (el: HTMLElement) => {
+  if (el.offsetParent === null) {
+    // Element is not participating in layout (e.g., display: none)
+    return false
+  }
+
   const rect = el.getBoundingClientRect()
 
   // We check both vertically and horizontally for containers that scroll in either direction
@@ -73,9 +78,13 @@ export const getScrollableParent = (element: HTMLElement | null): HTMLElement |
 }
 
 export const getElementsInViewportFromCollection = (
-  referenceElement: HTMLElement,
   elements: HTMLElement[],
+  referenceElement?: HTMLElement,
 ): HTMLElement[] => {
+  if (!referenceElement) {
+    return elements.filter((element) => elementInViewport(element))
+  }
+
   const referenceIndex = elements.indexOf(referenceElement)
   const upwardElements: HTMLElement[] = []
   const downwardElements: HTMLElement[] = []

packages/core/src/infiniteScroll/queryString.ts

@@ -85,7 +85,7 @@ export const useInfiniteScrollQueryString = (options: {
     const pageMap = new Map<string, number>()
     const elements = [...itemsElement.children] as HTMLElement[]
 
-    getElementsInViewportFromCollection(itemElement, elements).forEach((element) => {
+    getElementsInViewportFromCollection(elements, itemElement).forEach((element) => {
       const page = getPageFromElement(element) ?? '1'
 
       if (pageMap.has(page)) {

packages/core/src/infiniteScroll/scrollPreservation.ts

@@ -27,10 +27,7 @@ export const useInfiniteScrollPreservation = (options: {
 
       // Find the first visible element to use as a reference point
       // This element will help us calculate how much the content shifted after the update
-      const visibleElements = getElementsInViewportFromCollection(
-        itemsElement.firstElementChild as HTMLElement,
-        [...itemsElement.children] as HTMLElement[],
-      )
+      const visibleElements = getElementsInViewportFromCollection([...itemsElement.children] as HTMLElement[])
 
       if (visibleElements.length > 0) {
         referenceElement = visibleElements[0]

packages/react/test-app/Pages/InfiniteScroll/InvisibleFirstChild.tsx

@@ -0,0 +1,22 @@
+import { InfiniteScroll } from '@inertiajs/react'
+import UserCard, { User } from './UserCard'
+
+export default ({ users }: { users: { data: User[] } }) => {
+  return (
+    <div>
+      <h1>Infinite Scroll with Invisible First Child</h1>
+
+      <InfiniteScroll
+        data="users"
+        style={{ display: 'grid', gap: '20px' }}
+        loading={() => <div style={{ textAlign: 'center', padding: '20px' }}>Loading...</div>}
+      >
+        <div style={{ display: 'none' }}>Hidden first element</div>
+
+        {users.data.map((user) => (
+          <UserCard key={user.id} user={user} />
+        ))}
+      </InfiniteScroll>
+    </div>
+  )
+}

packages/svelte/test-app/Pages/InfiniteScroll/InvisibleFirstChild.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { InfiniteScroll } from '@inertiajs/svelte'
+  import UserCard, { type User } from './UserCard.svelte'
+
+  export let users: { data: User[] }
+</script>
+
+<div>
+  <h1>Infinite Scroll with Invisible First Child</h1>
+
+  <InfiniteScroll data="users" style="display: grid; gap: 20px">
+    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+
+    <div style="display: none">Hidden first element</div>
+
+    {#each users.data as user (user.id)}
+      <UserCard {user} />
+    {/each}
+  </InfiniteScroll>
+</div>

packages/vue3/test-app/Pages/InfiniteScroll/InvisibleFirstChild.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { InfiniteScroll } from '@inertiajs/vue3'
+import { User, default as UserCard } from './UserCard.vue'
+
+defineProps<{
+  users: { data: User[] }
+}>()
+</script>
+
+<template>
+  <div>
+    <h1>Infinite Scroll with Invisible First Child</h1>
+
+    <InfiniteScroll data="users" style="display: grid; gap: 20px">
+      <div style="display: none">Hidden first element</div>
+
+      <UserCard v-for="user in users.data" :key="user.id" :user="user" />
+
+      <template #loading>
+        <div style="text-align: center; padding: 20px">Loading...</div>
+      </template>
+    </InfiniteScroll>
+  </div>
+</template>

tests/app/server.js

@@ -1046,6 +1046,9 @@ app.get('/infinite-scroll/programmatic-ref', (req, res) =>
 app.get('/infinite-scroll/short-content', (req, res) =>
   renderInfiniteScroll(req, res, 'InfiniteScroll/ShortContent', 100, false, 5),
 )
+app.get('/infinite-scroll/invisible-first-child', (req, res) =>
+  renderInfiniteScroll(req, res, 'InfiniteScroll/InvisibleFirstChild'),
+)
 app.get('/infinite-scroll/reload-unrelated', (req, res) => {
   const page = req.query.page ? parseInt(req.query.page) : 1
   const partialReload = !!req.headers['x-inertia-partial-data']

tests/infinite-scroll.spec.ts

@@ -1406,6 +1406,24 @@ test.describe('Scroll position preservation', () => {
 
     expect(afterScreenshot).toEqual(beforeScreenshot)
   })
+
+  test('it maintains scroll position when first child element is invisible', async ({ page }) => {
+    await page.goto('/infinite-scroll/invisible-first-child?page=2')
+
+    // Verify the invisible element exists but is not visible
+    const hiddenElement = await page.locator('text="Hidden first element"')
+    await expect(hiddenElement).toBeAttached()
+    await expect(hiddenElement).toBeHidden()
+
+    // Page 1 loads immediately since the start trigger is visible
+    await expect(page.getByText('User 16')).toBeVisible()
+    await expect(page.getByText('Loading...')).toBeVisible()
+    await expect(page.getByText('User 1', { exact: true })).toBeVisible()
+
+    // Make sure the browser didn't scroll to the top...
+    const scrollY = await page.evaluate(() => window.scrollY)
+    expect(scrollY).toBeGreaterThan(100 * 15)
+  })
 })
 
 test.describe('Scrollable container support', () => {