React: Maintaining facets for search <Components> in Dialog boxes

I’ve run in to a slightly odd problem. And potentially i’m not using the React InstantSearch plugin in the way that it’s supposed to be used.

We are building our facets to be components in pop up dialog boxes. I am using the connectRefinementList connector. When I toggle the box on and interact with the facet everything works perfect. But when I then toggle off the box, the instant search makes a new query which essentially resets what’s come before.

The connectRefinementList lives in it’s own class so I can’t interact with my state (unless i’m missing something). I’m pretty much going round in circles trying to find the solution. I’ve looked in to Virtual Widgets which I think could be an avenue, but to get that to work I think I need to save the state of my search, and I run in to the state connection issue again.

I’ve tried looking through the documentation, but I keep coming up short!

Any help would be greatly appreciated.

Thanks for the clear explanation, but to be able to really help, could you make a sandbox please? There’s a starter file here.

You should be able to use the index listed there to recreate the problem.



Thanks for your response. After much soul searching I finally fixed this. My solution was to have the searchState passed around my redux store (too many parent/child/separate components) and then it was a case of getting the widgets working correctly.


1 Like