algolia / algolia/instantsearch

Nextjs back button resets filters (Instantsearch React Hooks)

Open
#5,622 3 comments 2 reactions 0 assignees View on GitHub
Library: React InstantSearch ≥ 7
Dominant language
TypeScript
Stars
4.1k
Forks
554
Avg merge
1d 11h
Merged PRs (30d)
51

Description

### 🐛 Current behavior

When using the back button to navigate, in some situations filters are still lost.

### 🔍 Steps to reproduce

**Working Path**
1. On the homepage click on filters dropdown button, check "HTML" - you will see filter is applied, the results are updated and the url params are updated.
2. Click on the first result, this will take you to a "theme" page
3. Use the back button to return to the homepage. The filters are visible in the url params. The results are filtered. The FilterBar UI has correct filters set.
4. You should be able to set any combination of refinements, search query and or pagination and then click on a card, visit the theme page, and then using the back button return to the homepage with all of the filters persisted and working.

**Non Working Path**
1. On the homepage click on filters dropdown button, check "HTML" - you will see filter is applied, the results are updated and the url params are updated.
2. In the header menu, click the "Category: React"
3. This pages uses `` to set the category to "React" - While the Filter count appears to be 0, the filter is applied. The results are for the category react only. This is not the bug.
4. Use the back button to return to the homepage. The filters are visible in the url params. But the results are reset and the `` (which includes Refinements and Search) UI has been reset.

**Possible Cause?**
I think issue lies somewhere with either `` or with the `` (which is just a wrapper including ``, `` etc)
I'm sorry I can't be more specific with the cause, but I can't seem to isolate it further.
For some time I thought the issue was with the unmounting of the `` but the confounding factor is that the navigation between the theme page and the homepage works, and this unmounts the ``

### Live reproduction

https://codesandbox.io/p/github/JugglerX/bal-router/main?workspaceId=0368fc3f-8777-43ce-a716-2cf99f1d7e03

### 💭 Expected Behaviour

When returning from the category page to the homepage, the filters should be applied as per the url params.

1. On the homepage click on filters dropdown button, check "HTML" - you will see filter is applied, the results are updated and the url params are updated.
2. In the header menu, click the "Category: React"
3. This pages uses to set the category to "React" - While the Filter count appears to be 0, the filter is applied. The results are for the category react only. This is not the bug.
4. **Expected Result:** Use the back button to return to the homepage. The filters are visible in the url params. The results are filtered. The FilterBar UI has correct filters set.

### Package version

"react-instantsearch-hooks-router-nextjs": "6.42.0"
"react-instantsearch-hooks-web": "6.42.0"

### Operating system

macOs 13.3

### Browser

Chrome

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and follow the non-working back-button path from the homepage through the React category page. Inspect the interaction between , , and the Next.js router integration; done means returning to the homepage restores the URL filters in both the results and FilterBar UI.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
frontend, search
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.