fix: always wait for navigated event for title (#22494) (#22510)

When running with react-router
always wait for vaadin-navigated
event before updating the title.

Fixes #21171

Co-authored-by: caalador <[email protected]>

Author: vaadin-bot

flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -346,6 +346,11 @@ function useQueuedNavigate(
     return enqueueNavigation;
 }
 
+const flowNavigation = () => {
+  // @ts-ignore
+  window.Vaadin.Flow.navigation = true;
+};
+
 function Flow() {
     const ref = useRef<HTMLOutputElement>(null);
     const navigate = useNavigate();
@@ -403,6 +408,8 @@ function Flow() {
             // When navigation is triggered by click on a link, fromAnchor is set to true
             // in order to get a server round-trip even when navigating to the same URL again
             fromAnchor.current = true;
+            // @ts-ignore
+            window.Vaadin.Flow.navigation = true;
             navigate(path);
             // Dispatch close event for overlay drawer on click navigation.
             window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
@@ -463,13 +470,17 @@ function Flow() {
     }, [vaadinRouterGoEventHandler, vaadinNavigateEventHandler]);
 
     useEffect(() => {
+        // @ts-ignore
+        window.addEventListener("popstate", flowNavigation);
         window.addEventListener('click', navigateEventHandler);
         flowReact.active = true;
 
         return () => {
             containerRef.current?.parentNode?.removeChild(containerRef.current);
             containerRef.current?.removeEventListener('flow-portal-add', addPortalEventHandler as EventListener);
             containerRef.current = undefined;
+            // @ts-ignore
+            window.removeEventListener("popstate", flowNavigation);
             window.removeEventListener('click', navigateEventHandler);
             flowReact.active = false;
         };