bug: Angular routerLink does not seem to take target in to account when using ion-item and ion-button

[j-oppenhuis]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x, v7.x

Current Behavior

Currently when using an ion-item and ion-button element in combination with routerLink and target, the target does not seem to be used.

Expected Behavior

The working should be the same as when using an anchor element. When for example target is set to _blank and routerLink is set to /detail a new tab should be opened in the browser.

Steps to Reproduce

<!--This works-->
<a href="/orders/2" target="_blank">
  <ion-label>Anchor target _blank</ion-label>
</a>
<!--This does not-->
<ion-item routerLink="/orders/1" target="_blank">
  <ion-label>IonItem target _blank</ion-label>
</ion-item>

Code Reproduction URL

https://stackblitz.com/edit/angular-rjzq6z-f5ejub?file=tsconfig.json

Ionic Info

Ionic:

Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.2.3
@angular-devkit/build-angular : 16.2.0
@angular-devkit/schematics : 16.2.0
@angular/cli : 16.2.0
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.1.1
@capacitor/android : 5.1.1
@capacitor/core : 5.1.1
@capacitor/ios : 5.1.1

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v16.19.0
npm : 8.19.3
OS : macOS Unknown

Additional Information

No response

[swamyreddy54]

IonItem with Anchor target _blank

if possible try to add the anchor tag

[swamyreddy54]

IonItem with Anchor target _blank

[j-oppenhuis]

IonItem with Anchor target _blank

Could you show me what you mean? The ion-item or ion-button itself will create an anchor when routerLink or href is used.

[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.

[j-oppenhuis]

In stackblitz I created a simple application with an anchor, ion-item and ion-button. You can find it here: https://stackblitz.com/edit/angular-rjzq6z-f5ejub?file=tsconfig.json

[sean-perkins]

Hello @j-oppenhuis, thanks for the reproduction! I have identified that this bug is a duplicate of #26394.

Amanda previously mentioned it here: #26394 (comment), but with Ionic Framework focusing on mobile applications, we have not prioritized the behavior of opening content in a new tab within the context of a webview for our own components.

I mentioned it in the PR to add support for the anchor tag, but if you are interested in submitting a fix for this issue, we will likely need to render an anchor around the element or within the shadow root to enable the functionality without excessive key listeners.

I'm going to close this ticket in favor of the existing one. Feel free to upvote that issue if you would like to see it prioritized.

Thanks!

[ionitron-bot]

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.