algolia / algolia/instantsearch

[react-instantsearch-hooks] Virtual widget state getting cleared on unmounting of Original Refinement List

Open
#6,558 5 comments 0 reactions 0 assignees View on GitHub
triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.