bug: ion-item href prop causes hard refresh when clicked, and routerLink prop disallows ctrl+click to open in new tab

Prerequisites

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

Describe the Feature Request

For now, if we use "router-link" args on ion-button or other tags in the app, this does not allow to do a "shift+click" to open a link in a new tab. For this, we need to use "href" args.

But using "href" args seems to break the "swipe-to-navigage-back" behavior on iOS.

Is it possible to reconcile both? Either have the swipe-to-navigate-back gesture work even when following href links, or have a way to selectively choose the "href-behavior" when compiling for the web, and the "router-link" behavior when compiling on mobile?

Describe the Use Case

This would allow people to have the best of both worlds: allow to open views in new tabs when needed on web UIs, and allow to have the "swipe-to-go-back" gesture on iOS

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Thanks for the request. Could you post a reproduction of the issues you're running into?

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

Here you go, using the simple "list" default app: https://github.com/maelp/ionic-href-issue

if you use "router-link" (by default) and click on a message, you can use "swipe-to-go-back"
if you use "href" (using the toggle) and click on a message, it reinits the router

Thank you, and apologies for the delay. I've confirmed that this behavior exists in all three frameworks (Angular/React/Vue) when using ion-item. I'm going to go ahead and file this as a bug.

While shift+click is a desktop behavior and we're trying to move our focus to mobile apps exclusively, we've addressed this with regular anchor links in Angular before: #25014 The href behavior is also worth taking a closer look at.

There are three possible things that may need doing here:

Address not being able to open the link in a new tab when using the routerLink property on ion-item.
Address the browser performing a hard refresh when using the href property on ion-item.
Update the ion-item docs in accordance with whatever we decide to do; right now it only describes the href prop (though routerLink is referenced in framework-specific routing pages) and the hard refresh behavior is not mentioned.

Thanks, any news on this? :)

I am also encountering this but, and using routerLink is not an ideal solution as it currently stands for two reasons:

It does not show the detail arrow when using routerLink.
If there are buttons nested within the IonItem, clicking one will also be considered a click on the IonItem and thus perform the navigation (in addition to clicking the button). This is not true of the href version.

Is there anything I can do to help move this along? Have you decided the desired functionality? It seems the RouterLink should be rendered with the href prop instead of an a tag

Is there any news on this item? :)

This seems to be an accessibility issue as well.

With IonItem and the href attribute specified I can tab to the item and navigate with my keyboard. Middle-click, right-click, or shift-click also work fine on the web. IonItem is correctly detected as a link by the browser. However, there's a full page reload after navigation and everything flashes black for a second.

It's not great to need to remember specify both router-link and href with the exact same values every time you want to make a link, but it's workable.

With IonRouterLInk I can't use keyboard navigation at all. IonRouterLinks are not in the tab order, there's no middle, right, or shift-click, and the item isn't detected as a link by the browser at all.

fix(angular): honor modifier-click on routerLink (ionic-team#31230)

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

fix(angular): honor modifier-click on routerLink (ionic-team#31230)

Navigation Menu

Repository navigation

bug: ion-item href prop causes hard refresh when clicked, and routerLink prop disallows ctrl+click to open in new tab #26394

Prerequisites

Describe the Feature Request

Describe the Use Case

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Information

2 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: ion-item href prop causes hard refresh when clicked, and routerLink prop disallows ctrl+click to open in new tab #26394

Description

Prerequisites

Describe the Feature Request

Describe the Use Case

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Information

Activity

averyrousseau commented on Dec 1, 2022

ionitron-bot commented on Dec 1, 2022

maelp commented on Dec 1, 2022

averyrousseau commented on Dec 13, 2022

2 remaining items

maelp commented on Jan 5, 2023

kristojorg commented on Jan 13, 2023

maelp commented on Feb 10, 2023

Smef commented on Feb 25, 2024

ionitron-bot commented on Jul 18, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions