Close result hit on click outside in react

How do I implement closing the hit result on clicking outside the result dropdown or the body of the page in React???

That should happen automatically in the interface. Are you using an Autocomplete searchbox? If so there is a setIsOpen setter you can use to override the behaviour manually (it’s what you use to implement cmd-K style hotkey behvaiour).

Thank you Chuck.

This is what my code looks like. I’m not using the autocomplete search box.

<InstantSearch
searchClient={searchClient}
indexName=“Products”
{…props}
>



      <div className="div-container">
        <EmptyQueryBoundary fallback={null}>
          <NoResultsBoundary fallback={<NoResults />}>
            <Hits hitComponent={Hit} />
          </NoResultsBoundary>
        </EmptyQueryBoundary>
      </div>
    </div>
  </InstantSearch>

With Instantsearch, the default behavior is to show the results on the same page as the search interface, so there’s no real way to “close” the results. You could build custom action using setUIState to clear the query string when a user clicks outside the query space, but to truly “close” the search results you’d want to put them in a panel, and I would argue it would be easier to just use an autocomplete interface at that point.

Alright. Thank you Chuck.