algolia / algolia/instantsearch
Nextjs back button resets filters (Instantsearch React Hooks)
- 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
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