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

[maelp]

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

[averyjohnston]

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

[ionitron-bot]

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.

[maelp]

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

[averyjohnston]

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:

1. Address not being able to open the link in a new tab when using the routerLink property on ion-item.
2. Address the browser performing a hard refresh when using the href property on ion-item.
3. 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.