fix(react): fixing issue where modifier keys were blocked while clicking links

Author: ShaneK

packages/react-router/test/base/src/App.tsx

@@ -64,6 +64,7 @@ import { Step1, Step2, Step3, Step4 } from './pages/replace-params/ReplaceParams
 import { ParamSwipeBack, ParamSwipeBackB } from './pages/param-swipe-back/ParamSwipeBack';
 import TabLifecycle from './pages/tab-lifecycle/TabLifecycle';
 import TabLifecycleOutside from './pages/tab-lifecycle/TabLifecycleOutside';
+import { RouterLinkModifierClick, RouterLinkModifierClickTarget } from './pages/router-link-modifier-click/RouterLinkModifierClick';
 
 setupIonicReact();
 
@@ -122,6 +123,8 @@ const App: React.FC = () => {
           <Route path="/replace-params" element={<Navigate to="/replace-params/step1" replace />} />
           <Route path="/tab-lifecycle/*" element={<TabLifecycle />} />
           <Route path="/tab-lifecycle-outside" element={<TabLifecycleOutside />} />
+          <Route path="/router-link-modifier-click" element={<RouterLinkModifierClick />} />
+          <Route path="/router-link-modifier-click/target" element={<RouterLinkModifierClickTarget />} />
         </IonRouterOutlet>
       </IonReactRouter>
     </IonApp>

packages/react-router/test/base/src/pages/Main.tsx

@@ -134,6 +134,9 @@ const Main: React.FC = () => {
           <IonItem routerLink="/tab-lifecycle">
             <IonLabel>Tab Lifecycle</IonLabel>
           </IonItem>
+          <IonItem routerLink="/router-link-modifier-click">
+            <IonLabel>Router Link Modifier Click</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react-router/test/base/src/pages/router-link-modifier-click/RouterLinkModifierClick.tsx

@@ -0,0 +1,52 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonItem,
+  IonLabel,
+  IonButtons,
+  IonBackButton,
+} from '@ionic/react';
+import React from 'react';
+
+/**
+ * Test for issue #26394: routerLink should allow modifier key clicks (ctrl/cmd/shift)
+ * to open links in a new tab without triggering SPA navigation on the current page.
+ */
+
+export const RouterLinkModifierClick: React.FC = () => {
+  return (
+    <IonPage data-pageid="router-link-modifier-click">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Router Link Modifier Click</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonItem id="nav-to-target" routerLink="/router-link-modifier-click/target">
+          <IonLabel>Navigate to Target</IonLabel>
+        </IonItem>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export const RouterLinkModifierClickTarget: React.FC = () => {
+  return (
+    <IonPage data-pageid="router-link-modifier-click-target">
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/router-link-modifier-click" />
+          </IonButtons>
+          <IonTitle>Target Page</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <p>Target Page</p>
+      </IonContent>
+    </IonPage>
+  );
+};

packages/react-router/test/base/tests/e2e/playwright/router-link-modifier-click.spec.ts

@@ -0,0 +1,43 @@
+import { test } from '@playwright/test';
+import { ionPageVisible, ionPageDoesNotExist, withTestingMode } from './utils/test-utils';
+
+/**
+ * Tests for issue #26394:
+ * routerLink on IonItem (and other routing components) should allow modifier key
+ * clicks (ctrl/cmd/shift+click) to open in a new tab without triggering SPA
+ * navigation on the current page.
+ */
+test.describe('Router Link Modifier Click', () => {
+  test('normal click should trigger SPA navigation', async ({ page }) => {
+    await page.goto(withTestingMode('/router-link-modifier-click'));
+    await ionPageVisible(page, 'router-link-modifier-click');
+
+    await page.locator('#nav-to-target').click();
+
+    await ionPageVisible(page, 'router-link-modifier-click-target');
+  });
+
+  test('meta+click should not trigger SPA navigation on the current page', async ({ page }) => {
+    await page.goto(withTestingMode('/router-link-modifier-click'));
+    await ionPageVisible(page, 'router-link-modifier-click');
+
+    await page.locator('#nav-to-target').click({ modifiers: ['Meta'] });
+    await page.waitForTimeout(500);
+
+    // The current page should NOT have navigated to the target via SPA
+    await ionPageVisible(page, 'router-link-modifier-click');
+    await ionPageDoesNotExist(page, 'router-link-modifier-click-target');
+  });
+
+  test('shift+click should not trigger SPA navigation on the current page', async ({ page }) => {
+    await page.goto(withTestingMode('/router-link-modifier-click'));
+    await ionPageVisible(page, 'router-link-modifier-click');
+
+    await page.locator('#nav-to-target').click({ modifiers: ['Shift'] });
+    await page.waitForTimeout(500);
+
+    // The current page should NOT have navigated to the target via SPA
+    await ionPageVisible(page, 'router-link-modifier-click');
+    await ionPageDoesNotExist(page, 'router-link-modifier-click-target');
+  });
+});

packages/react/src/components/createRoutingComponent.tsx

@@ -56,6 +56,11 @@ export const createRoutingComponent = <PropType, ElementType>(tagName: string, c
     private handleClick = (e: React.MouseEvent<PropType>) => {
       const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
       if (routerLink !== undefined) {
+        // Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
+        // without triggering SPA navigation on the current page.
+        if (e.metaKey || e.ctrlKey || e.shiftKey) {
+          return;
+        }
         e.preventDefault();
         this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
       }