From b45852e9e073e93a765843e0262bb07b5aec37f7 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 31 Aug 2023 14:24:53 -0400
Subject: [PATCH] fix: prevent navigating when button is disabled

---
 core/src/components/nav-link/nav-link.tsx     |  4 +--
 .../nav-link/test/nav-link.spec.tsx           | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 core/src/components/nav-link/test/nav-link.spec.tsx

diff --git a/core/src/components/nav-link/nav-link.tsx b/core/src/components/nav-link/nav-link.tsx
index e0527c23cd..abfb37437d 100644
--- a/core/src/components/nav-link/nav-link.tsx
+++ b/core/src/components/nav-link/nav-link.tsx
@@ -35,8 +35,8 @@ export class NavLink implements ComponentInterface {
 
   private onClick = () => {
     const { el } = this;
-    const button = el.querySelector('button,ion-button,a');
-    if (button?.hasAttribute('disabled')) {
+    const button = el.querySelector<HTMLIonButtonElement>('ion-button');
+    if (button?.disabled) {
       // Do not navigate if the button is disabled
       return;
     }
diff --git a/core/src/components/nav-link/test/nav-link.spec.tsx b/core/src/components/nav-link/test/nav-link.spec.tsx
new file mode 100644
index 0000000000..e26202f23c
--- /dev/null
+++ b/core/src/components/nav-link/test/nav-link.spec.tsx
@@ -0,0 +1,32 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Button } from '../../button/button';
+import { Nav } from '../../nav/nav';
+import { NavLink } from '../nav-link';
+
+describe('NavLink', () => {
+  it('should not navigate when button is disabled', async () => {
+    const page = await newSpecPage({
+      components: [Nav, NavLink, Button],
+      template: () => (
+        <ion-nav>
+          <ion-nav-link component="div">
+            <ion-button disabled>Disabled</ion-button>
+          </ion-nav-link>
+        </ion-nav>
+      ),
+    });
+
+    const mock = jest.fn();
+
+    const nav = page.body.querySelector('ion-nav')!;
+    const ionButton = page.body.querySelector('ion-button')!;
+
+    nav.addEventListener('ionNavWillChange', mock);
+
+    await ionButton.click();
+
+    expect(mock).not.toHaveBeenCalled();
+  });
+});