pick first popstate

vaadin · Jan 16, 2024 · 2b15d91 · 2b15d91
1 parent 457b033
commit 2b15d91
Showing 1 changed file with 26 additions and 41 deletions.
diff --git a/flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx b/flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx
@@ -138,10 +138,11 @@ function vaadinRouterGlobalClickHandler(event) {
     }
 }
 
-// We can't initiate useNavigate() from outside React component so we store it here for use in the navigateEvent.
+// We can't initiate useNavigate() from outside React component, so we store it here for use in the navigateEvent.
 let navigation: NavigateFunction | ((arg0: any, arg1: { replace: boolean; }) => void);
 let mountedContainer: Awaited<ReturnType<typeof flow.serverSideRoutes[0]["action"]>> | undefined = undefined;
 let lastNavigation: String;
+let popstateListener: { type: string, listener: EventListener, useCapture: boolean };
 
 // @ts-ignore
 function navigateEventHandler(event) {
@@ -204,20 +205,26 @@ export default function Flow() {
     const ref = useRef<HTMLOutputElement>(null);
     const {pathname, search, hash} = useLocation();
     const navigate = useNavigate();
-    let popstateListener: { type: any, listener: EventListener, useCapture: boolean };
+
     navigation = navigate;
     useEffect(() => {
 
         window.document.addEventListener('click', vaadinRouterGlobalClickHandler);
         window.addEventListener('vaadin-router-go', navigateEventHandler);
-        // @ts-ignore
-        let popstateListeners = window.getEventListeners('popstate');
-        for (let i = 0; i < popstateListeners.length; i++) {
-            if (popstateListeners[i].listener.name === 'handlePop') {
-                popstateListener = popstateListeners[i];
-                window.removeEventListener(popstateListener.type, popstateListener.listener, popstateListener.useCapture);
-                window.addEventListener(popstateListener.type, popstateHandler);
-                break;
+
+        if(popstateListener) {
+            // If we have gotten the router popstate handle that
+            window.removeEventListener('popstate', popstateListener.listener, popstateListener.useCapture);
+            window.addEventListener('popstate', popstateHandler);
+        } else {
+            // @ts-ignore
+            let popstateListeners = window.getEventListeners('popstate');
+            if (popstateListeners.length > 0) {
+                // pick the first popstate and use that in future.
+
+                popstateListener = popstateListeners[0];
+                window.removeEventListener('popstate', popstateListener.listener, popstateListener.useCapture);
+                window.addEventListener('popstate', popstateHandler);
             }
         }
         if(lastNavigation === pathname) {
@@ -245,7 +252,7 @@ export default function Flow() {
             window.removeEventListener('vaadin-router-go', navigateEventHandler);
             if (popstateListener) {
                 window.removeEventListener('popstate', popstateHandler);
-                window.addEventListener('popstate', popstateListener.listener);
+                window.addEventListener('popstate', popstateListener.listener, popstateListener.useCapture);
             }
         };
     }, [pathname, search, hash]);
@@ -258,24 +265,16 @@ export const serverSideRoutes = [
 
 export function listenerCollector() {
     "use strict";
-    // save the original methods before overwriting them
-    [Document, Window, Element].forEach((cst) => {
+    [Document, Window].forEach((cst) => {
+        // save the original methods before overwriting them
         if (typeof cst === "function") {
             // @ts-ignore
             cst.prototype._addEventListener = cst.prototype.addEventListener;
             // @ts-ignore
             cst.prototype._removeEventListener = cst.prototype.removeEventListener;
 
-            /**
-             * [addEventListener description]
-             * @param {[type]}  type       [description]
-             * @param {[type]}  listener   [description]
-             * @param {Boolean} useCapture [description]
-             */
-            // @ts-ignore
-            cst.prototype.addEventListener = function (type, listener,
-                                                       useCapture = false
-            ) {
+            cst.prototype.addEventListener = function (type: string, listener: EventListener,
+                                                       useCapture: boolean = false) {
                 // declare listener
                 // @ts-ignore
                 this._addEventListener(type, listener, useCapture);
@@ -290,17 +289,8 @@ export function listenerCollector() {
                 this.eventListenerList[type].push({ type, listener, useCapture });
             };
 
-            /**
-             * [removeEventListener description]
-             * @param  {[type]}  type       [description]
-             * @param  {[type]}  listener   [description]
-             * @param  {Boolean} useCapture [description]
-             * @return {[type]}             [description]
-             */
-            // @ts-ignore
-            cst.prototype.removeEventListener = function (type, listener,
-                                                          useCapture = false
-            ) {
+            cst.prototype.removeEventListener = function (type: string, listener: EventListener,
+                                                          useCapture: boolean = false) {
                 // remove listener
                 // @ts-ignore
                 this._removeEventListener(type, listener, useCapture);
@@ -334,13 +324,8 @@ export function listenerCollector() {
                     delete this.eventListenerList[type];
             };
 
-            /**
-             * [getEventListeners description]
-             * @param  {[type]} type [description]
-             * @return {[type]}      [description]
-             */
             // @ts-ignore
-            cst.prototype.getEventListeners = function (type) {
+            cst.prototype.getEventListeners = function (type: string) {
                 // @ts-ignore
                 if (!this.eventListenerList) this.eventListenerList = {};
 
@@ -352,4 +337,4 @@ export function listenerCollector() {
             };
         }
     });
-};
+};