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

[maelp]

trafficstars

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

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[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: https://github.com/ionic-team/ionic-framework/pull/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.

[maelp]

Thanks, any news on this? :)

[kristojorg]

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

1. It does not show the detail arrow when using routerLink.
2. 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

[maelp]

Is there any news on this item? :)

[Smef]

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.