SearchBox widget does not sync with router (browser forward/back) if input is focussed

[Njitram2000]

🐛 Current behavior

When the browser history (forward/back) is used after searching and the input field is still focussed, the url and search results update but the searchBox widget input field does not get the new value.

🔍 Steps to reproduce

Copy the shared code html file to a dedicated file locally. You cannot reproduce this in codesandbox because the integrated forward/back force the input field to lose focus.

1. search for something and wait for the url to update
2. type an extra letter and wait for the url to update
3. The input field should remain focused
4. Use your mouse buttons or alt+arrow to go back
5. The url has gone back to the first search but the input field has remained the same

Live reproduction

https://codesandbox.io/p/sandbox/confident-stitch-6c4dzj

💭 Expected behavior

The input field should update with the router, even if it is focused

Package version

algoliasearch 5.10.2, instantsearch.js 4.75.3

Operating system

windows 11

Browser

Firefox 137 and chrome 134

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

I can't find which code is responsible for this right now (

instantsearch/packages/react-instantsearch/src/widgets/SearchBox.tsx

Lines 89 to 93 in 999d3cc

	// Track when the InstantSearch query changes to synchronize it with
	// the React state.
	// We bypass the state update if the input is focused to avoid concurrent
	// updates when typing.
	if (query !== inputValue && document.activeElement !== inputRef.current) {

for react), but if I remember it correctly, this is done on purpose to prevent another issue. What's odd is that these other methods of navigating the browser don't cause the input to blur. Does this also happen in multi-page apps or only because there's a history pop state handler?

[Njitram2000]

I have had a lot of trouble pinning down the exact cause and pattern. Until I accidentally noticed it was not happening with codesandbox.io and realised it was the focus.

My actual app is much more complicated but is basically an overlay over a multi-page website and while using the search, the InstantSearch router is used to update the url without reloading the page. Reloading the page reopens the overlay and applies the search state from the url (basic InstantSearch router behaviour). When that happens, the input has the correct value again.
When one of those real page loads is in the browser history, navigating to it will apply the value to the field correctly. So the initial read() of the router seems to ignore the focus in the field.
This issue only occurs when the history api updates the url without a full new page load.

I hope that answers your question about multi-page. All of this can be demonstrated with the html I included in the ticket.

What's odd is that these other methods of navigating the browser don't cause the input to blur.

I actually prefer that. It allows quick navigation between results and be ready to type a search term. But if I have to choose between losing focus and losing the searchterm, I'll settle for keeping the searchterm and not losing my history. I think my client would make the same decision (I'll have to check tomorrow)