React InstantSearch Toggle: if no results on boolean value panel just "flashes"

I have a Panel with multiple toggles - all access different attributes that are all boolean values. One toggle targets an attribute that has all false values, but I want to show those with true values on Toggle. Instead of showing my No Results message, the Panel “flashes” and then resets the Toggle and the search results. See this video - http://recordit.co/TcVB5vWA50

You can see when choosing any Toggle other than Offer Video Visits the results adjust, but Offer Video Visits just refreshes. It’s available as an attribute for faceting… but all of the records have it as false. What am I missing?

Hi @abushnell,

It’s a bit hard to understand the issue from the video. Could you share a reproduction of the error? We provide template in order to avoid the boilerplate part. You can find it on CodeSandbox.

Thanks!

Hi @samuel.vaillant!

I’ve provided the code used https://codesandbox.io/s/2j166rjjy

If you choose Offers Video Visits you’ll see the “flash”/refresh I’m experiencing!

I’m using react-instantsearch 4.4.0.

Thank you!

Hi @abushnell,

Thanks for the CodeSandbox, it really helps!

The issue come from the fact that you are unmounting the widget when there is no results. In React InstantSearch the widgets drive the search. It means that when a widget is mount or unmount it applies or remove his refinement from the search. More than applying filters the lifecycle of the widget schedule a new query.

Applied to your example when you refine with “Offer Video Visits” you won’t retrieve any results so the <AllSidebarResults> component will unmount all the <Toggle>. It means that all the refinements applied by the <Toggle> will be removed, since the refinements have changed we also schedule a new query without refinements. The results aren’t empty anymore so all the components are render again. That’s why we have the blink effect.

Right now there is no solution for “persist” a refinement when a widget is unmount. It’s a known issue on our side and we hope find a proper solution. As a workaround you can hide them until you really don’t need them anymore. I updated your example on CodeSandbox as an example.

Hope that helps :slightly_smiling_face:

Hi @samuel.vaillant!

Thank you so much for that information! Makes much more sense now… and that is a tricky problem!

Your code helped fixed my problem - appreciate it very much.