bug: Disabled button in a nav link should not navigate when clicked

[fatihkahraman]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

It would be beneficial to have a disabled-state on ion-nav-link, like the one that ion-button has.

Describe the Use Case

With a disabled-state, we could conditionally disable an ion-nav-link, that includes an ion-button. Currently, this causes some problems:

<ion-nav-link [component]="someComponent" [componentProps]="{ someProps }">
  <ion-button [disabled]="condition">
    <div>Continue</div>
  </ion-button>
</ion-nav-link>

Even when ion-button is disabled, ion-nav-link triggers.

Describe Preferred Solution

No response

Describe Alternatives

<ion-nav-link [disabled]="condition" [component]="someComponent" [componentProps]="{ someProps }">
  <ion-button>
    <div>Continue</div>
  </ion-button>
</ion-nav-link>

Related Code

No response

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[sean-perkins]

Hello @fatihkahraman thanks for this feature request!

After discussing with the team and reviewing how this should work, we are going to reclassify this as a bug and fix accordingly. When the button is disabled, clicking the nav link should not route. This will require no additional APIs and will be a better developer experience.

[Hussain0520]

Hey @sean-perkins, is someone working on this issue?

[sean-perkins]

@Hussain0520 this issue is not currently in the active sprint work. This would likely be a post v7 bug fix, unless there was a community contribution in the interim.

[Hussain0520]

I would like to contribute to this issue but as this is my first contribution a little help from your side would be much appreciated!

[sean-perkins]

We have a contributing guide listed here: https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md

The only section that may be outdated is tests, which are now written with Playwright.

From the core/ directory:

npm install 

Installing the browser images:

npx install playwright

Testing a component:

npx playwright test src/components/nav-link/

This issue stems from here: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/nav-link/nav-link.tsx#L34-L36

You would need to debug if the event target allows you to see if the clicked element is a disabled button/link or not and if it is disabled, not executing the navLink utility. Otherwise we need to experiment with the best way to query the interactive element from inside ion-nav-link and add the click listener directly to that element.

[Hussain0520]

Can you assign me this issue as it will help me in college project. I am looking forward to work in resolving this issue. Thanks!

[Hussain0520]

@sean-perkins can you assign me this issue?

[noone-silent]

How to resolve this issue now? In the documentation there is no clear instruction how to avoid a navigation at all.

For example:

<IonNavLink routerDirection='forward' component={someFunction}>...</IonNavLink>

We tried with undefined and null and it still navigates to some blank page. How to prevent, with a function, to navigate at all? Also in the component function, there is no event where we could stop propagation or anything.

I think there need to be two fixes. One for the disabled and one for the function return. Current workaround looks something like this:

{
    continueIsDisabled &&
    <IonButton disabled={true}>Continue</IonButton>
}
{
    continueIsDisabled === false &&
    <IonNavLink routerDirection='forward' component={someFunction}>
        <IonButton>Continue</IonButton>
    </IonNavLink>
}

[howlettga]

it's a little annoying but i am just conditionally rendering the nav link or else a separate disabled button. it's indistinguishable from a ui perspective

[sean-perkins]

Here is a dev-build with the proposed fix for checking for the disabled button when clicking the ion-nav-link. If anyone would like to test and let me know if they run into any issues that would be appreciated.

7.3.3-dev.11693454416.1cb6a7ec

[howlettga]

@sean-perkins The fix in the dev-build works great for me. Let me know if there's anything more formal I could do to help verify, but very much appreciate the follow up!

[irg1008]

Can't we just add a "canNavigate" boolean value to the ion-nav-link??