UIState render errors with Safari auto translate

[y-a-v-a]

🐛 Current behavior

Hi,
I think we have an issue with useInfiniteHits and the UIState in combination with auto translation of iOS and MacOS Safari. We have an ecommerce site in for example a Dutch locale, being nl_nl and sometimes customers use the translation feature of Safari, "Translate to English", from f.e. iOS Safari.

The useInfiniteHits hook renders a "toon volgende 36 resultaten" button, of which the label is translated by iOS Safari into "show the following 36 results". As soon as the load more button is clicked, our error boundary kicks in: NotFoundError: The object can not be found here.

In a onStateChange callback we receive the parameters setUiState, uiState which we use by calling setUiState(uiState); At the very moment setUIState is called, the error is thrown.

Have you ever encountered issues with UIState in combination with browser translation features?

🔍 Steps to reproduce

See above

Live reproduction

https://www.g-star.com/nl_nl/search?q=jeans

💭 Expected behavior

The inifinite hits loads the next 36 products.

Package version

"instantsearch.js": "4.73.3","react-instantsearch": "7.12.3","react-instantsearch-router-nextjs": "7.12.3",

Operating system

Latest iOS

Browser

iOS Safari, MacOS Safari

Code of Conduct

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

[Haroenv]

Not sure what the solution can be yet, but this is likely a problem related to https://martijnhols.nl/blog/everything-about-google-translate-crashing-react, although I'm not fully sure which DOM change happens that can't be followed. Which code do you have exactly for the show more button? As you're using the connector the actual JSX matters.

I think your solution likely is to ensure the whole translated string is wrapped in a span as described in the article