Programmatically clear searchState?

Using connectStateResults to make a tag menu…

when I select a tag I want to clear the searchState. Even though the input is cleared, the searchState remains.

Is there a way to programmatically clear searchState?

function TagMenu({
  menuProps,
  hits,
  getItemProps,
  highlightedIndex,
  searchState
}) {
  debugger;
  return searchState?.query ? (
    <TagMenuContainer
      data-test="tag-menu"
      {...menuProps}
    >
      { hits.length ?
        hits.map((hit, index) =>
          <TagMenuItem
            hit={hit}
            getItemProps={getItemProps}
            isHovered={highlightedIndex === index}
            index={index}
          />
        )
        :
        <TagMenuItemBox>No matching tags</TagMenuItemBox>
      }
    </TagMenuContainer>
  )
  :
  null;
}

export default connectStateResults(TagMenu);

Hello!

Depending on your use case and what you want to do in your custom component, you may want to use connectCurrentRefinements.

The connectCurrentRefinements connector lets you access a refine function which you can use to clear all applied filters. Additionally, the connected component exposes a prop to let you clear the query as well.

If you’re stuck, could you please provide a minimal reproducible example in CodeSandbox, so it’s easier for us to debug?

Best,