Unmounting a Searchbox that is not the last one should not trigger an empty refine

[e-krebs]

Describe the bug 🐛

You've got two searchboxes on a page. When one is unmounted (even though the other one is still there), an empty refine is triggered.

To Reproduce 🔍 Put two search boxes on a page. One is a regular one. One is a custom one (using connectSearchBox) conditionally-rendered when there's no result. It displays a button to do a refine() that will display results. When clicking that button, it results on the custom search box being unmounted (since there's results now), which triggers an empty refine(), even though there's still a search box on the page (the regular one).

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-instantsearch-app-xqwol?fontsize=14&hidenavigation=1&theme=dark
2. Perform a search with results like 'algolia' -> you'll see results for 'algolia'
3. Click on the "search for 'test' (always show)" button on top of the results -> you'll see results for 'test'
4. Perform a search with no results, like 'hrtga' -> you'll see no results and two buttons
5. click on the "search for 'test' (always show)" button (same as in step 2) -> you'll see results for an empty search. What happens is:
   • search for test is done
   • there are now results, so the new button (which is a conditionaly-rendered SearchBox) is unmouted
   • the unmounting of this searchbox triggers an empty refine('')

Expected behavior 💭

Do not trigger an empty refine when unmounting a SearchBox. Or at least, do not do so when there's still at lest one SearchBox still mounted.

[Haroenv]

I’m not sure if it’s avoidable, but this should at least be documented somewhere. Who knows where it should go?

as far as I can tell we have this problem in InstantSearch.js too

[tkrugg]

this issue is a duplicate of: https://github.com/algolia/react-instantsearch/issues/302 This behaviour you're describing is the side-effect of a design choice. I get that it can be annoying in your use case.

Two workarounds I can think of:

• the 1st (you guessed it) is not to unmount your widget during the lifetype of your InstantSearch Instance.
• the second is use a copy of connectSearchbox that doesn't cleanup on unmount. You can probably override the componentWillUnmount here. See: https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-core/src/core/createConnector.tsx#L186-L213 Let me know if you need help with that

[sarahdayan]

Hey!

We're doing a round of clean up before migrating this repository to the new InstantSearch monorepo. This issue seems not to have generated much activity lately. Is it still an issue for you @e-krebs?

[e-krebs]

I'm not working on the project that had that issue and afaik it's not been reported since. Fine by me to close this