algolia / algolia/instantsearch
[react-instantsearch-hooks] Virtual widget state getting cleared on unmounting of Original Refinement List
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
### 🐛 Current behavior
I have created a `VirtualFilters` to use `useRefinementList`, to store the state of the applied filters.
The filters are displayed inside a modal. When the modal closes, the `CurrentRefinements` resets its value to default.
I have followed the exact code as given in the official docs - [Persist State on Unmount](https://www.algolia.com/doc/guides/building-search-ui/widgets/show-and-hide-widgets/react/#persist-the-state-on-unmount)
I have checked the other issue related to this [ISSUE : 5240](https://github.com/algolia/instantsearch/issues/5240), but I want this to work with the `virtual widgets` if possible.
Can you please tell me, if I am making a mistake somewhere?
### 🔍 Steps to reproduce
[CodeSandbox](https://codesandbox.io/p/sandbox/mvkzz9)
- Click on the "Filters" button to open the modal
- The refinements will be listed.
- Click again on "Filters" to hide it.
- The refinement has reset and no filters are being displayed.
### Live reproduction
https://mvkzz9.csb.app/
### 💭 Expected behavior
When I close the `Filters` modal, the `CurrentRefinements` should not reset, but persist the state of the updated filters.
This should happen, since I have created a `VirtualFilters` component to store the state as well, which doesn't get unmounted.
### Package version
algoliasearch: 5.11.0, react-instantsearch": 7.13.6
### Operating system
MacOS 15.3.1
### Browser
Edge 132.0.2957.140
### Code of Conduct
- [x] I agree to follow this project's Code of Conduct
Contributor guide
Research direction
Start by reproducing the behavior in the linked CodeSandbox: open and close the Filters modal while using VirtualFilters with useRefinementList and CurrentRefinements. Compare the result with the Persist State on Unmount documentation and issue 5240; done means closing the modal leaves the applied refinements displayed instead of resetting them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100