Search state doesn't persist when opening a modal

Open Q&A
1

Hi,

I put my SearchBox inside a modal

I also sync the search state with the URL. So when I visit http:localhost:3000/?query=Algolia I expect the search modal is open and the Search sends a request with query=Algolia and returns a response accordingly.

Everything works just perfectly until I add the queryHook to debounce the search.

Now when I visit http:localhost:3000?query=Algolia, the search modal is open and I can see the search input is pre-filled with “Algolia”. However, the search doesn’t filter results with the query “Algolia”, it instead returns all the results. In fact, I see it sends an empty query to the server.

import {
	InstantSearch,
	SearchBox,
	InfiniteHits,
	InstantSearchSSRProvider,
	Configure,
	type SearchBoxProps,
} from "react-instantsearch-hooks-web";
	
export function Search({ serverState, serverUrl, locale }: SearchProps) {

	// Debounce search
	const queryHook: SearchBoxProps["queryHook"] = debounce((query, search) => {
		spTrackSearchTerm(query);

		search(query);
	}, 500);

	return (
		<InstantSearchSSRProvider {...serverState}>
			<InstantSearch
				searchClient={searchClient}
				indexName={searchIndex}
				insights
				routing={{
					router: history({
						getLocation() {
							if (typeof window === "undefined") {
								return new URL(
									serverUrl
								) as unknown as Location;
							}

							return window.location;
						},
					}),
					stateMapping: singleIndex(searchIndex),
				}}
			>
			
			<SearchBox
						autoFocus={true}
						placeholder="Search"
						
                                                 👉 This queryHook causes issue
						queryHook={queryHook}
					/>
	
			<InfiniteHits
				showPrevious={false}
				hitComponent={Hit}
			/>
			</InstantSearch>
		</InstantSearchSSRProvider>
	);
}

export function SearchDialog() {
  return (<Dialog><Search/></Dialog>)
}

I think it has something to do with the modal mount/unmount. I try to put the queryHook to the parent component which is not subjected to the mount/unmount but it doesn’t work.

How should I resolve this issue? Thanks