Reset ScrollProp when requested

packages/core/src/infiniteScroll/data.ts

@@ -54,6 +54,17 @@ export const useInfiniteScrollData = (options: {
     state.requestCount = rememberedState.requestCount || 0
   }
 
+  const removeEventListener = router.on('success', () => {
+    const scrollProp = getScrollPropFromCurrentPage()
+
+    if (scrollProp.reset) {
+      state.previousPage = scrollProp.previousPage
+      state.nextPage = scrollProp.nextPage
+      state.lastLoadedPage = scrollProp.currentPage
+      state.requestCount = 0
+    }
+  })
+
   const getScrollPropKeyForSide = (side: Side): ScrollPropPageNames => {
     return side === 'next' ? 'nextPage' : 'previousPage'
   }
@@ -143,5 +154,6 @@ export const useInfiniteScrollData = (options: {
     hasNext,
     fetchNext,
     fetchPrevious,
+    removeEventListener,
   }
 }

packages/core/src/types.ts

@@ -110,6 +110,7 @@ export type ScrollProp = {
   previousPage?: number | string
   nextPage?: number | string
   currentPage?: number | string
+  reset: boolean
 }
 
 export interface Page<SharedProps extends PageProps = PageProps> {
@@ -532,6 +533,7 @@ export interface UseInfiniteScrollDataManager {
   hasNext: () => boolean
   fetchNext: (reloadOptions?: ReloadOptions) => void
   fetchPrevious: (reloadOptions?: ReloadOptions) => void
+  removeEventListener: () => void
 }
 
 export interface UseInfiniteScrollElementManager {

packages/react/src/InfiniteScroll.ts

@@ -212,6 +212,7 @@ const InfiniteScroll = forwardRef<InfiniteScrollRef, ComponentProps>(
       }
 
       return () => {
+        dataManager.removeEventListener()
         elementManager.flushAll()
         setInfiniteScroll(null)
       }

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

@@ -0,0 +1,80 @@
+import { InfiniteScroll, Link, useForm } from '@inertiajs/react'
+import { debounce } from 'lodash-es'
+import { useCallback, useEffect } from 'react'
+import UserCard, { User } from './UserCard'
+
+interface Props {
+  users: { data: User[] }
+  preserveState: boolean
+  filter?: string
+  search?: string
+}
+
+export default ({ users, preserveState, filter, search }: Props) => {
+  const { data, setData, get } = useForm({
+    filter: undefined,
+    page: undefined,
+    search: search,
+  })
+
+  const debouncedSearch = useCallback(
+    debounce(() => {
+      get(
+        '',
+        preserveState
+          ? {
+              preserveState: true,
+              replace: true,
+              only: ['users', 'search', 'filter'],
+              reset: ['users'],
+            }
+          : {
+              replace: true,
+            },
+      )
+    }, 250),
+    [get],
+  )
+
+  useEffect(() => {
+    if (data.search !== search) {
+      debouncedSearch()
+    }
+  }, [data.search, search, debouncedSearch])
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setData('search', e.target.value)
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
+        <Link href="">No Filter</Link>
+        <Link href="?filter=a-m">A-M</Link>
+        <Link href="?filter=n-z">N-Z</Link>
+        <div>Current filter: {filter || 'none'}</div>
+        <div>Current search: {search || 'none'}</div>
+        <input value={data.search || ''} onChange={handleSearchChange} placeholder="Search..." />
+      </div>
+
+      <InfiniteScroll
+        data="users"
+        style={{ display: 'grid', gap: '20px' }}
+        loading={() => <div style={{ textAlign: 'center', padding: '20px' }}>Loading...</div>}
+      >
+        {users.data.map((user) => (
+          <UserCard key={user.id} user={user} />
+        ))}
+      </InfiniteScroll>
+
+      <div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
+        <Link href="">No Filter</Link>
+        <Link href="?filter=a-m">A-M</Link>
+        <Link href="?filter=n-z">N-Z</Link>
+        <div>Current filter: {filter || 'none'}</div>
+        <div>Current search: {search || 'none'}</div>
+        <input value={data.search || ''} onChange={handleSearchChange} placeholder="Search..." />
+      </div>
+    </div>
+  )
+}

packages/svelte/src/InfiniteScroll.svelte

@@ -182,7 +182,10 @@
       : infiniteScrollInstance?.elementManager.disableTriggers()
   }
 
-  onDestroy(() => infiniteScrollInstance?.elementManager.flushAll())
+  onDestroy(() => {
+    infiniteScrollInstance?.dataManager.removeEventListener()
+    infiniteScrollInstance?.elementManager.flushAll()
+  })
 </script>
 
 {#if !startElement && !reverse}

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { InfiniteScroll, Link, useForm } from '@inertiajs/svelte'
+  import { onDestroy } from 'svelte'
+  import UserCard, { type User } from './UserCard.svelte'
+
+  export let users: { data: User[] }
+  export let preserveState: boolean
+  export let filter: string | undefined = undefined
+  export let search: string | undefined = undefined
+
+  const form = useForm({
+    filter: undefined,
+    page: undefined,
+    search: search,
+  })
+
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+  let previousSearch = search
+
+  onDestroy(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+  })
+
+  // Debounced search using manual setTimeout/clearTimeout
+  $: if ($form.search !== previousSearch) {
+    // Clear previous timeout
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+
+    // Set new timeout for debounced search
+    timeoutId = setTimeout(() => {
+      $form.get(
+        '',
+        preserveState
+          ? {
+              preserveState: true,
+              replace: true,
+              only: ['users', 'search', 'filter'],
+              reset: ['users'],
+            }
+          : { replace: true },
+      )
+      previousSearch = $form.search
+    }, 250)
+  }
+</script>
+
+<div>
+  <div style="margin-bottom: 20px; display: flex; gap: 10px">
+    <Link href="">No Filter</Link>
+    <Link href="?filter=a-m">A-M</Link>
+    <Link href="?filter=n-z">N-Z</Link>
+    <div>Current filter: {filter || 'none'}</div>
+    <div>Current search: {search || 'none'}</div>
+    <input bind:value={$form.search} placeholder="Search..." />
+  </div>
+
+  <InfiniteScroll data="users" style="display: grid; gap: 20px">
+    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+
+    {#each users.data as user (user.id)}
+      <UserCard {user} />
+    {/each}
+  </InfiniteScroll>
+
+  <div style="margin-top: 20px; display: flex; gap: 10px">
+    <Link href="">No Filter</Link>
+    <Link href="?filter=a-m">A-M</Link>
+    <Link href="?filter=n-z">N-Z</Link>
+    <div>Current filter: {filter || 'none'}</div>
+    <div>Current search: {search || 'none'}</div>
+    <input bind:value={$form.search} placeholder="Search..." />
+  </div>
+</div>

packages/vue3/src/infiniteScroll.ts

@@ -166,7 +166,10 @@ const InfiniteScroll = defineComponent({
       }
     })
 
-    onUnmounted(elementManager.flushAll)
+    onUnmounted(() => {
+      dataManager.removeEventListener()
+      elementManager.flushAll()
+    })
 
     watch(
       () => [autoLoad.value, props.onlyNext, props.onlyPrevious],

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { InfiniteScroll, Link, useForm } from '@inertiajs/vue3'
+import { debounce } from 'lodash-es'
+import { watch } from 'vue'
+import { User, default as UserCard } from './UserCard.vue'
+
+const props = defineProps<{
+  users: { data: User[] }
+  preserveState: boolean
+  filter?: string
+  search?: string
+}>()
+
+const form = useForm({
+  filter: undefined,
+  page: undefined,
+  search: props.search,
+})
+
+watch(
+  () => form.search,
+  debounce(
+    () =>
+      form.get(
+        '',
+        props.preserveState
+          ? {
+              preserveState: true,
+              replace: true,
+              only: ['users', 'search', 'filter'],
+              reset: ['users'],
+            }
+          : {
+              replace: true,
+            },
+      ),
+    250,
+  ),
+)
+</script>
+
+<template>
+  <div>
+    <div style="margin-bottom: 20px; display: flex; gap: 10px">
+      <Link href=""> No Filter </Link>
+      <Link href="?filter=a-m"> A-M </Link>
+      <Link href="?filter=n-z"> N-Z </Link>
+      <div>Current filter: {{ filter || 'none' }}</div>
+      <div>Current search: {{ search || 'none' }}</div>
+      <input v-model="form.search" placeholder="Search..." />
+    </div>
+
+    <InfiniteScroll data="users" style="display: grid; gap: 20px">
+      <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 style="margin-top: 20px; display: flex; gap: 10px">
+      <Link href=""> No Filter </Link>
+      <Link href="?filter=a-m"> A-M </Link>
+      <Link href="?filter=n-z"> N-Z </Link>
+      <div>Current filter: {{ filter || 'none' }}</div>
+      <div>Current search: {{ search || 'none' }}</div>
+      <input v-model="form.search" placeholder="Search..." />
+    </div>
+  </div>
+</template>

playgrounds/react/composer.json

@@ -10,7 +10,7 @@
     "require": {
         "php": "^8.2",
         "guzzlehttp/guzzle": "^7.2",
-        "inertiajs/inertia-laravel": "dev-merge-improvements",
+        "inertiajs/inertia-laravel": "^2.0.10",
         "laravel/framework": "^11.0",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^2.7",