Clear all refinements when the search box is focused

[markosrx]

Hi 👋
I have one question related to using algolia connectors with react native. Is it possible somehow to clear all refinements when search box - search input field using connectSearchBox is focused? Thanks.

[Haroenv]

you can use useClearRefinements to clear the refinements in the focus handler of the search box, do you have code?

[markosrx]

Any other way instead of using react-instantsearch-hooks?

[Haroenv]

sorry, I didn't see you were using React InstantSearch core, in that case you can use connectCurrentRefinements(({refine, items}) => // ... refine(items)) together with connectSearchBox, for example something like this (pseudo code:

const RawSearchBox = ({ refine, clearItems }) => ...

const SearchBox = connectCurrentRefinements(({ refine, items }) => {
const clearItems = () => refine(items)
connectSearchBox(({refine}) => <RawSearchBox refine={refine} clearItems={clearItems} />)
})

[markosrx]

@Haroenv Thanks for your help, I tried something in the way you suggest but I am getting problems with maximum update depth exceeded or problem when try to drill function prop as clearItems...Is there some proper way how to wrap and use multiple connectors or rule what connector can wrap another or not?

[dhayab]

Hi @markosrx, as a workaround you can set the refine function in a ref and pass it to the connected search box. This will prevent infinite rerenders. You can see a working example in components/SearchBox.js of this sandbox: https://snack.expo.dev/@dhayaben/disrespectful-apples.