fix: Run only one queued navigate() at a time (#22021) (#22025)

vaadin-bot · Artur- · web-flow · commit c54c631880df · 2025-08-13T06:03:00.000Z
This fixes cases where the server sends multiple navigate() calls in the same response. There is currently no IT that would fail but this might very well resolve some edge/timing cases without ITs.

This is needed also for React 19 where timing is slightly different and the current solution does not work.

Co-authored-by: Artur &lt;artur@vaadin.com&gt;
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
@@ -277,6 +277,7 @@ type NavigateOpts = {
 
 type NavigateFn = (to: string, callback: boolean, opts?: NavigateOptions) => void;
 
+let navigateInProgress = false;
 /**
  * A hook providing the `navigate(path: string, opts?: NavigateOptions)` function
  * with React Router API that has more consistent history updates. Uses internal
@@ -291,6 +292,11 @@ function useQueuedNavigate(
     const [navigateQueueLength, setNavigateQueueLength] = useState(0);
 
     const dequeueNavigation = useCallback(() => {
+        if (navigateInProgress) {
+            dequeueNavigationAfterCurrentTask();
+            return;
+        }
+
         const navigateArgs = navigateQueue.shift();
         if (navigateArgs === undefined) {
             // Empty queue, do nothing.
@@ -303,14 +309,15 @@ function useQueuedNavigate(
                 waitReference.current = undefined;
             }
             navigated.current = !navigateArgs.callback;
+            navigateInProgress = true;
             navigate(navigateArgs.to, navigateArgs.opts);
             setNavigateQueueLength(navigateQueue.length);
         };
         blockingNavigate();
     }, [navigate, setNavigateQueueLength]);
 
     const dequeueNavigationAfterCurrentTask = useCallback(() => {
-        queueMicrotask(dequeueNavigation);
+        setTimeout(dequeueNavigation, 0);
     }, [dequeueNavigation]);
 
     const enqueueNavigation = useCallback(
@@ -499,6 +506,7 @@ function Flow() {
             if (navigated.current && !fromAnchor.current) {
                 blocker.proceed();
                 blockingPromise.resolve();
+                navigateInProgress = false;
                 return;
             }
             fromAnchor.current = false;
@@ -516,12 +524,14 @@ function Flow() {
                         prevent() {
                             blocker.reset();
                             blockingPromise.resolve();
+                            navigateInProgress = false;
                             navigated.current = false;
                         },
                         redirect,
                         continue() {
                             blocker.proceed();
                             blockingPromise.resolve();
+                            navigateInProgress = false;
                         }
                     },
                     router
@@ -545,16 +555,17 @@ function Flow() {
                         containerRef.current.serverConnected = (cancel) => {
                             if (cancel) {
                                 blocker.reset();
-                                blockingPromise.resolve();
                             } else {
                                 blocker.proceed();
-                                blockingPromise.resolve();
                             }
+                            blockingPromise.resolve();
+                            navigateInProgress = false;
                         };
                     } else {
                         // permitted navigation: proceed with the blocker
                         blocker.proceed();
                         blockingPromise.resolve();
+                        navigateInProgress = false;
                     }
                 });
             }
