fix: add global click handler for navigation

When using React router, clicks on anchors are intercepted only if Flow client
has been initialized. In Hilla or hybrid application, if a Flow view is never
navigated, clicking on such links cause the browser to reload the page instead
of navigating to the expected view.
This change registers a global click handler that intercepts click events and
triggers a router navigation if necessary.
The new behavior is aligned with vaadin-router.

Fixes #20939

Author: mcollovati

flow-plugins/flow-maven-plugin/src/it/flow-addon/src/main/fake-resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -15,4 +15,5 @@
  */
 
 // Resource loaded from project dependency
-export const serverSideRoutes = []
+export const serverSideRoutes = [];
+export const registerGlobalClickHandler = (router: any) => {};

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

@@ -16,7 +16,7 @@
 /// <reference lib="es2018" />
 import { Flow as _Flow } from 'Frontend/generated/jar-resources/Flow.js';
 import React, { useCallback, useEffect, useReducer, useRef, useState, type ReactNode } from 'react';
-import { matchRoutes, useBlocker, useLocation, useNavigate, type NavigateOptions, useHref } from 'react-router';
+import { matchRoutes, useBlocker, useLocation, useNavigate, type NavigateOptions, useHref, type DataRouter } from 'react-router';
 import { createPortal } from 'react-dom';
 
 const flow = new _Flow({
@@ -134,6 +134,22 @@ function extractPath(event: MouseEvent): void | string {
     return normalizeURL(new URL(anchor.href, anchor.baseURI));
 }
 
+export const registerGlobalClickHandler = (router: DataRouter)=> {
+    window.addEventListener('click', (event: MouseEvent) => {
+        const path = extractPath(event);
+        if (!path) {
+            return;
+        }
+
+        if (event && event.preventDefault) {
+            event.preventDefault();
+        }
+        router.navigate(path);
+    });
+};
+
+
+
 /**
  * Fire 'vaadin-navigated' event to inform components of navigation.
  * @param pathname pathname of navigation
@@ -342,28 +358,6 @@ function Flow() {
         [dispatchPortalAction]
     );
 
-    const navigateEventHandler = useCallback(
-        (event: MouseEvent) => {
-            const path = extractPath(event);
-            if (!path) {
-                return;
-            }
-
-            if (event && event.preventDefault) {
-                event.preventDefault();
-            }
-
-            navigated.current = false;
-            // 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;
-            navigate(path);
-            // Dispatch close event for overlay drawer on click navigation.
-            window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
-        },
-        [navigate]
-    );
-
     const vaadinRouterGoEventHandler = useCallback(
         (event: CustomEvent<URL>) => {
             const url = event.detail;
@@ -533,7 +527,6 @@ function Flow() {
                 if (outlet && outlet !== container.parentNode) {
                     outlet.append(container);
                     container.addEventListener('flow-portal-add', addPortalEventHandler as EventListener);
-                    window.addEventListener('click', navigateEventHandler);
                     containerRef.current = container;
                 }
                 return container.onBeforeEnter?.call(

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

@@ -1,7 +1,9 @@
-import { routes } from "%routesJsImportPath%";
+import { router, routes } from "%routesJsImportPath%";
+import { registerGlobalClickHandler } from "Frontend/generated/flow/Flow.js";
 
 (window as any).Vaadin ??= {};
 (window as any).Vaadin.routesConfig = routes;
+registerGlobalClickHandler(router);
 
 export { routes as forHMROnly };