feat: bypass Link click handler if alt click or defaultPrevented

e2e/fs-router.spec.ts

@@ -1,3 +1,3 @@
 import { expect } from '@playwright/test';
 
 import { test, prepareStandaloneSetup } from './utils.js';
@@ -81,5 +81,18 @@
       await page.goto(`http://localhost:${port}/_components/Counter`);
       await expect(page.getByText('404 Not Found')).toBeVisible();
     });
+
+    test('alt click', async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+      await page.click("a[href='/foo']", {
+        button: 'right',
+      });
+      await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+      await page.click("a[href='/foo']", {
+        modifiers: ['ControlOrMeta'],
+      });
+      await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+    });
   });
 }

packages/waku/src/router/client.ts

@@ -81,6 +81,10 @@ const parseRouteFromLocation = (): RouteProps => {
   return parseRoute(new URL(window.location.href));
 };
 
+const isAltClick = (event: MouseEvent<HTMLAnchorElement>) =>
+  event.button !== 0 ||
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
 let savedRscParams: [query: string, rscParams: URLSearchParams] | undefined;
 
 const createRscParams = (query: string): URLSearchParams => {
@@ -265,8 +269,7 @@ export function Link({
       };
     }
   }, [unstable_prefetchOnView, router, to]);
-  const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  const internalOnClick = () => {
     const url = new URL(to, window.location.href);
     if (url.href !== window.location.href) {
       const route = parseRoute(url);
@@ -284,7 +287,15 @@ export function Link({
         changeRoute(route, { shouldScroll: scroll ?? newPath });
       });
     }
-    props.onClick?.(event);
+  };
+  const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (props.onClick) {
+      props.onClick(event);
+    }
+    if (!event.defaultPrevented && !isAltClick(event)) {
+      event.preventDefault();
+      internalOnClick();
+    }
   };
   const onMouseEnter = unstable_prefetchOnEnter
     ? (event: MouseEvent<HTMLAnchorElement>) => {