In the Hooks version, how can I disable search-as-you-type?

[MichaelAllenWarner]

I'm using InstantSearch React Hooks, and I need to have the search only submit when the user hits the button (i.e., not in response to typing).

In the non-hooks version, the SearchBox component accepts a boolean searchAsYouType option, but that's not available in the hooks version.

[MichaelAllenWarner]

In case anyone else is struggling with this, I have a very hacky solution that seems to be working:

const Search = () => {
  const searchHelperRef = useRef<
    null | Parameters<NonNullable<InstantSearchProps['searchFunction']>>[0]
  >(null);

  const executeSearchRef = useRef<null | ((value: string) => void)>(null);

  return (
    <InstantSearch
      searchFunction={(helper) => {
        // set searchHelperRef if needed (should just happen once on page-load)
        if (searchHelperRef.current === null) {
          searchHelperRef.current = helper;
        }
        // prevent searching if query is empty string
        const query = helper.getQuery();
        if (query.query) helper.search();
      }}
      // ...
    >
      <SearchBox
        onSubmit={() => {
          // trigger a search when submit-button is pressed
          const helper = searchHelperRef.current;
          const search = executeSearchRef.current;
          if (helper && search) {
            const query = helper.getQuery();
            if (query.query) search(query.query);
          }
        }}
        queryHook={(query, search) => {
          // set executeSearchRef if needed (should just happen once, on first time typing in input)
          if (executeSearchRef.current === null) {
            executeSearchRef.current = search;
          }
          // set query (but don't perform search; only want to search on button-push)
          const helper = searchHelperRef.current;
          if (helper) {
            helper.setQuery(query);
          }
        }}
      />
      {/* ... */}
    </InstantSearch>
  );
};

[francoischalifour]

You could re-implement the <SearchBox> component that refines only on submit. I created a sandbox.

It uses the underlying SearchBox UI component that is undocumented for now.