Issues with Chrome on iPhone

[b1rdex]

Hello. I'm using your lib, it's great, thanks!

It's used like this:

export const FilterQueryStateConfiguration = {
    location: queryTypes.string.withDefault(DefaultFilterValues.location),
    type: queryTypes.array(queryTypes.string).withDefault(DefaultFilterValues.type),
    // skipped the rest
}

const [ filterQueryParams, setFilterQueryParams ] = useQueryStates(FilterQueryStateConfiguration, {history: "replace"})

useEffect(() => {
  const subscription = watch((filterValues) => {
    const filter = processFilterValues(filterValues)

    if (process.browser) {
      setFilterQueryParams(filter, {shallow: true})
    }

    setFilter(filter)
  });
  return () => subscription.unsubscribe();
}, [watch, setFilterQueryParams])

Everything is fine – works on desktop browsers, works in mobile Safari too. But I have a very strange issue in Chome@iPhone: location is not updated.

You can see it yourself on https://thaimix.ru

Do you have any ideas on how to debug/fix the issue?

[franky47]

Unfortunately, I don't have an iPhone to test this against. That being said, all browsers on iOS are actually Safari (WebKit) under the hood, so it seems weird to see discrepancies.

I don't think the process.browser condition check is necessary (if it's the thing causing this problem), as useEffect only runs on the client.

[b1rdex]

Yes, I removed the process.browser check, don't know why it was there. That isn't related.

It turns out that i18n locale redirect is somehow related to the issue, because localeDetection: false (https://nextjs.org/docs/advanced-features/i18n-routing#disabling-automatic-locale-detection) in config fixes the issue. Maybe the library doesn't pick up the updated path after the redirect?

[franky47]

That would be a good lead yes, there are already some issues related to Next.js advanced config (subpaths, i18n etc). I don't have a lot of time to look into those right now, but I'd happily review some contributions.