Algolia: Reset of refinement when opening a drawer

Question

I'm developing my marketplace with Algolia and I'm using this example as support. https://react-instantsearch.netlify.app/examples/e-commerce/

On mobile mode the filters are visible thanks to a drawer.

On my app I made customs UI for every widget. For example when I do a research with the SearchBox and I open my filter drawer, the search is reset.

But when I do it with the widgets (not customs) it works, the search does not reset. It thought it my be a mistake of mine in my custom component so I tried with the Algolia's documentation examples. And I have the same results

const SearchBox = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
  />
);

To follow my design I really need to do a custom widget.

Does anyone have an idea why the refinement reset itself with custom widget ?

I also tried Routing URLs but I have an infinite loop with custom widgets ^^""

Example :> https://stackblitz.com/edit/react-8dpccc

Algolia's example mobile first page

Yes I did ! To fix this I needed to export the algolia widget outside of my components — Newtchuck, Jun 30 '20 at 07:33
@Newtchuck Can you please provide more information on how you solved this? Perhaps answering your own question with a snippet or explanation? — HowieDoing, Sep 21 '20 at 19:25

score 1 · Accepted Answer · answered Dec 15 '20 at 06:51

For instantsearch custom widgets, they need to be defined outside the react component to make sure the re-renders do not reset the search state.

In the above example -> https://stackblitz.com/edit/react-8dpccc provided by @Newtchuck removing the SearchBox custom widget from App's scope and adding it to the top should do the trick

const SearchBox = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
  />
);

const CustomSearchBox = connectSearchBox(SearchBox)


const App = () => {.... // rest of the code same as the example

Algolia: Reset of refinement when opening a drawer

1 Answers1