bug: angular, routerLink prevents opening link in new tab

[Juarrow]

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

• v4.x
• v5.x
• v6.x

Current Behavior

When importing the IonicModule and using [routerLink],
the following line prevents Ctrl+Click behavior on Desktop browsers.

ionic-framework/angular/src/directives/navigation/router-link-delegate.ts

Line 56 in 732f8e1

ev.preventDefault();

Expected Behavior

Ctrl+Click should trigger the default browser behavior (e.g. open the link in a new tab/page/etc).

Steps to Reproduce

1. Create an anchor element with a [routerLink]="[<your link>]"
2. Ctrl+Click on it

Code Reproduction URL

Link to repository

On the home page CTRL+Click the link

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (C:\Users\Julian\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.1.1
   @angular-devkit/schematics    : 13.0.3
   @angular/cli                  : 13.0.3
   @ionic/angular-toolkit        : 5.0.3

Utility:

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

System:

   NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.1.0
   OS     : Windows 10

Additional Information

I'm currently monkey-patching it 🙈 .

Maybe this can be fixed by something like (pseudo-code)

if(platform is desktop && (key == CTRL || key == Meta) && button == 0)) {
 return true;
}

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

[Juarrow]

@liamdebeasi added the reproduction repo link to the issue.

[liamdebeasi]

Thanks! I can reproduce this behavior.

For additional context, this Ctrl+Click behavior works with the standard routerLink in an Angular app without Ionic, so I think we should support this.

[Juarrow]

If it helps, i can create a PR with a fix.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[liamdebeasi]

Yes, that would be great! Just as a heads up, much of the team is taking time off for the upcoming holidays in the United States, so we may not get to your PR right away.

[maelp]

I have the same issue with Ionic and VueJS, cmd+click on a link does not allow opening in a new tab

[sean-perkins]

@maelp can you share more information about the problem you are facing in Vue? This issue is tracking router links not working as expected with native HTML elements (a tag, etc.).

Quickly checking with Vue, CMD/CTRL + click works under these conditions:

<router-link to="/routing/child">
  <button>button</button>
</router-link>
<router-link to="/routing/child" custom v-slot="{ navigate, href }">
  <a :href="href" @click="navigate">link text</a>
</router-link>

[maelp]

Well for me, when I add a regular <ion-button> (without any router-link around) and do a cmd+click, it just does the same as a click (opens in the same tab)

[sean-perkins]

Correct, that is currently the expected/default behavior. If you wouldn't mind opening a new issue to track that request change, that would be appreciated. I don't have a strong stance at the moment if ion-button should operate differently, but that should be evaluated by the team & community to make sure it doesn't negatively impact existing applications.

The scope of this issue is around fixing the behavior of an a tag not working with CMD/CTRL + click with Ionic, when it works as expected without Ionic in the framework itself (Angular).

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