reactjsalgoliainstantsearch.jsreact-instantsearch

Algolia: Reset of refinement when opening a drawer


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


Solution

  • 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