From a1d9c6ab61f1e6f05102ae2f46ab3cb0206e2495 Mon Sep 17 00:00:00 2001
From: Amir Beshkar <abeshkar@elmar.nl>
Date: Mon, 30 Dec 2024 13:14:02 +0100
Subject: [PATCH] fix: update adapter when window location is changed

---
 .../src/index.ts                              | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/use-query-params-adapter-window/src/index.ts b/packages/use-query-params-adapter-window/src/index.ts
index 050887f..dfb611b 100644
--- a/packages/use-query-params-adapter-window/src/index.ts
+++ b/packages/use-query-params-adapter-window/src/index.ts
@@ -1,13 +1,19 @@
-import { useState } from 'react';
-import { PartialLocation, QueryParamAdapterComponent } from 'use-query-params';
+import { useEffect, useState } from 'react';
+import {
+  PartialLocation,
+  QueryParamAdapterComponent,
+  QueryParamAdapter,
+} from 'use-query-params';
 
-function makeAdapter() {
+function makeAdapter({ onChange }: { onChange(): void }): QueryParamAdapter {
   const adapter = {
     replace(location: PartialLocation) {
       window.history.replaceState(location.state, '', location.search || '?');
+      onChange();
     },
     push(location: PartialLocation) {
       window.history.pushState(location.state, '', location.search || '?');
+      onChange();
     },
     get location() {
       return window.location;
@@ -24,8 +30,17 @@ function makeAdapter() {
 export const WindowHistoryAdapter: QueryParamAdapterComponent = ({
   children,
 }) => {
+  const handleURLChange = () =>
+    setAdapter(makeAdapter({ onChange: handleURLChange }));
   // we use a lazy caching solution to prevent #46 from happening
-  const [adapter] = useState(makeAdapter);
+  const [adapter, setAdapter] = useState(() =>
+    makeAdapter({ onChange: handleURLChange })
+  );
+
+  useEffect(() => {
+    window.addEventListener('popstate', handleURLChange);
+    return () => window.removeEventListener('popstate', handleURLChange);
+  }, []);
 
   return children(adapter);
 };