Navigation does not reset on filter change and query change

I am using the React Instant search and I noticed that whenever there is a change in the filters that I applied via facetFilters, the navigation does not change. For example, assuming i initially filtered a hit with 7 pages and I navigate to the 7th page and make another filter, the result will remain at that page 7 even when the hits coming might not get to 7 pages. Is there a way to reset this page whenever there is a filter change?

Hey there @nnajivictor0! Welcome to the forum.

Could you let us know how you’ve implemented this?

By default, when additional facetFilters are selected, we return to the first page, for example as seen here: https://codesandbox.io/s/intelligent-dan-mc6ly?file=/src/App.js

Resultado de imagen para gif example|-2147483648xCloudAppDropHeight

If you could provide us with a minimal reproducible example (perhaps by forking that sandbox) it would be very helpful.

Thanks!

I made a rough code of exactly what i am trying to implement here. It doesn’t look all that exciting but if you could type “Abuja” inside the box, you would notice that it returned up to 14 hits. when you navigate to the 3rd page and then make another search eg lagos, you will be stuck in the 3rd page.

take a look: https://codesandbox.io/s/charming-kare-fooxy?file=/src/App.js

Hi @nnajivictor0, when you are setting a single refinement, the most straightforward way is using menu or connectMenu. Now I set it up with a visible menu etc. but of course you can always change those components themselves to have different rendering based on what you expect

Hi @haroen, thanks for the response. However, this menu doesn’t go with the general design of the website. The user is supposed to search for a location, then pick what they are looking for in that location for e.g hotel spaces, or office spaces. The query is the wildcard query or “” which is supposed to display all the hits available and then they are filtered based on what the user selected or there is a default filter if none. Now, when these filters are changes, the page rendered is still the current page the user was at when they made the filter change. I want the page to start from page 1 whenever a filter change is made

Hi @nnajivictor0, thanks for sharing your example. It looks as though you’re using just our connectHits and connectPagination connectors and otherwise recreating other components like a by using the Configure widget to set facetFilters. If so, a possible route to go would be to reset the page parameter to 0 in the Configure whenever a user types another character or changes the “type”.

That said, if at all possible, we hope that you are able to use the components we provided like the MenuSelect, @haroen shared so that you don’t need to recreate the behavior.

Hope this helps!