In InstantSearch, each widget hold a piece of related state. For example, the
SearchBox holds the current query, meaning that we always need to have one in the search experience, even if it doesn’t render anything.
In your case, you have a
RefinementList in a sidebar that closes, unmounting the widget, causing the refinements to disappear. This is expected.
There are several ways of handling this: you can either avoid unmounting, or use virtual widgets.
In this scenario, you never unmount the
RefinementList. Instead of removing your left sidebar from the component structure, you repurpose it into the overlaying sliding sidebar, with CSS, using media queries.
This is what we did in our e-commerce demo using React InstantSearch. The sidebar on the left with multiple
RefinementLists transforms into a sliding overlay on narrow screens, with CSS only.
Use virtual components
What we call virtual widgets are InstantSearch widgets that don’t render anything, using connectors. They’re useful for controlling state programmatically. Instead of letting your
RefinementList control the UI and the state, you build your own refinement UI and programmatically manage state, then pass it down to a renderless
RefinementList via the
This is a heavier solution, which I would recommend only if the first one has a technical limitation within your use case that you can’t circumvent.