[InfiniteScroll] Not fetching when changing query parameters

[francoism90]

@inertiajs/vue3 Version

2.2.1

Backend stack (optional)

Laravel 12.x (latest)
PHP 8.4
NuxtUI 4

Describe the problem

I have a 'chips' that work like filters, e.g. how YouTube has this on the frontpage: https://github.com/francoism90/stry/blob/4d5894ab2d78dd57938c80a75cb8c4d4af303d37/resources/js/pages/Tags/TagIndex.vue#L21

The problem is when switching between them (particular on this page) it doesn't seem to reset the scroller state. I have tried appending query parameters like ?page=1, but I think the issue is actually in the remember state.

Steps to reproduce

1. Add an query parameter
2. Re-use same component
3. State (pages?) seems to not reset

[pascalbaljet]

How are you navigating to the same page with another tag? I tried reproducing it with the <Link> component, navigating to ?tag=a or ?tag=b, and then it correctly navigates to the first page and resets the <InfiniteScroll> component. Could you provide some more info on how I can reproduce it?

[francoism90]

I have a list of tags with a type. You could try to reproduce this as follow:

• have an unfiltered one (first entry)
• filter by tag-type

For some reason I've also noticed issues with the search page (double items are shown on query change or the first item stays in the state without a page refresh - both situations occur).

I navigate between with (NuxtUI v4) and use Laravel Wayfinder (actions) to built the query. Should I use a form instead? My goal is to have this shareable, that's why I'm updating the query parameter.

This is my collection layout: https://github.com/francoism90/stry/blob/main/resources/js/layouts/Video/VideoCollection.vue - this helps me to always have the same layout when showing items. If this isn't recommended, please let me know.

[pascalbaljet]

I've written some additional tests to verify the filter/search behavior: #2594

[pascalbaljet]

I've merged the tests in #2595 and made sure the <InfiniteScroll> component now also respects the reset visit option.

[francoism90]

@pascalbaljet Thanks, I'll test later today.

Think it's better to also refactor my logic into forms.

[pascalbaljet]

@pascalbaljet Thanks, I'll test later today.

Think it's better to also refactor my logic into forms.

Perfect! I'll close this issue, but feel free to open another one if you stumble upon another issue!

[francoism90]

@pascalbaljet it seems to be working when using forms instead. :)

NuxtUI doesn't seem to pass things like reset props, I'll ask them if this possible (it didn't work for me, maybe I did something wrong). It should use <InertiaLink>: https://ui.nuxt.com/docs/getting-started/installation/vue#inertia

Edit: nuxt/ui#4763 - maybe this will allow link overrules.