Environment
- Browser: Chrome
- React Router (with useSearchParams hook)
- Tawk.to chat widget
Issue Description
When using setSearchParams
from React Router’s useSearchParams()
hook, the browser URL gets reset to its initial value from when the page first loaded, rather than updating the current URL’s search parameters.
Steps to Reproduce
- Load the application at URL:
http://mysite.com/some/initial/url?param1=abc
- Navigate to a new route using React Router:
http://mysite.com/the/new/url?param1=abc
- Call
setSearchParams
to modify a query parameter -
Expected: URL updates to
http://mysite.com/the/new/url?param1=xyz
(or similar) -
Actual: URL reverts to
http://mysite.com/some/initial/url?param1=xyz
Root Cause
Tawk.to replaces the native history.replaceState
function with a custom implementation that appears to be using a stale/cached value for the URL parameter (i
):
window.history.replaceState = function(e, n, i) {
for (var o = i && "string" == typeof i ? i.indexOf("#max-widget") : -1,
a = arguments.length,
s = new Array(a > 3 ? a - 3 : 0),
c = 3; c < a; c++)
s[c - 3] = arguments[c];
r.apply(window.history, [e, n, i].concat(s)),
-1 === o ? t.$store.dispatch("session/sendNavigationEvent", {}, {
root: !0
}) : t.isManualHash = !1
}
The third parameter i
(the URL) appears to contain a stale value from the initial page load rather than the current URL.
Impact
This breaks standard React Router navigation when using search parameters, as any programmatic update to query strings causes an unexpected navigation back to the initial URL.