How to clear search after clicking on a hit?

Open Q&A
#1

Hello,

I’m developing the React InstantSearch with backend search and an conditionalQuery. I’m using connectSearchBox and connectHits and would like to clear the search wenn I click an hit.
Is there an easy way to this in the click event?

Best,

#2

Hi,

I haven’t tested this, but do you think something like this would work or be close to what you’re looking for?

// expose a function to programmatically manipulate the search
// can be global, or within the component, through a context, or a state management system, etc.
let updateSearch;
connectSearchBox(({ refine }) => updateSearch = refine)

// get and call the function from your hit component
const CustomHit = ({ hit }) => {
  return <div>
    <button onClick={() => updateSearchBox('')}
    ...
  </div>
})

Let me know if this gives you ideas on how to solve your issue.
Best,

#3

Hi Jonathan,

something in this direction could workout for me.
Thanks I will try it.

best,
Arthur

#4

Unfortunately, this not works as expected :smiley: But It worked for with connectAutoComplete as I have hits, currentRefinement and refine there.