[react-instantsearch-hooks] RefinementList search state cleared on un-mount even when using useRefinementList to create a virtual widget

🐛 Bug description

When placing a <RefinementList> component inside a modal component that mounts and un-mounts its content, the current refinements are cleared even when using the useRefinementsList hook to create a virtual refinement list widget.

🔍 Bug reproduction

Minimal example set up on Codesandbox, using the Algolia docs example as a reference.

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/snowy-field-22wyku?file=/src/App.js
2. Click on the “Show DIalog” button to open the modal
3. Apply a refinement (notice that the hits have updated)
4. Close the modal by clicking outside the modal body
5. The refinement has reset and all results show (refinement state has been cleared)

Live reproduction:

https://codesandbox.io/s/snowy-field-22wyku?file=/src/App.js

💭 Expected behavior

Current refinement search state should be preserved when the <RefinementList> component inside the modal component is unmounted on close.

Environment

• React InstantSearch Hooks version: 6.29.0
• React version: 18.0.0
• Browser: Chrome 103.0.5060.53
• OS: macOS

Thanks

[RobbyUitbeijerse]

We are running into the same issue. We use a drawer like structure on mobile, while keeping the desktop UI components mounted. The drawer is a component from @chakra-ui/react, of which we can’t control the mounting state (it gets unmounted on close) https://chakra-ui.com/docs/components/drawer

The drawer opens if you click a filter button, the user can apply refinements within the drawer but once the drawer closes, all filters cleared (as the drawer simply renders all the filters within). It feels like unexpected behaviour, as I would expect the lib to keep track of the mounted widgets

We’ll look intro restructuring our component tree for now.

[edit] please note that both the desktop and mobile UI use hooks

The documentation actually seems to suggest that the @jamespeilow is pointing out should actually work: https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react-hooks/#building-a-virtual-widget-with-hooks

[CMLivingston]

To anyone who doesn’t want the added complexity of maintaining search state and virtual widgets just to get a drawer working w/ React on mobile, Material UI drawer has the ability to hide without unmounting, so you can use regular refinement lists without any of the workarounds above. Funny enough, I love Chakra UI and my entire project uses it except for just this single drawer on mobile breakpoints 😝.

Material UI drawer: https://mui.com/material-ui/react-drawer/

<Drawer
  anchor={'left'}
  open={isDrawerIsOpen}
  onClose={handleClose}
  variant="temporary"
  ModalProps={{
    keepMounted: true,
  }}
>