fix: prevent navigating when button is disabled

core/src/components/nav-link/nav-link.tsx

@@ -34,7 +34,14 @@ export class NavLink implements ComponentInterface {
   @Prop() routerAnimation?: AnimationBuilder;
 
   private onClick = () => {
-    return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
+    const { el } = this;
+    const button = el.querySelector<HTMLIonButtonElement>('ion-button');
+    if (button?.disabled) {
+      // Do not navigate if the button is disabled
+      return;
+    }
+
+    return navLink(el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
   };
 
   render() {

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();
+  });
+});