ShaneK · GitHub

Issue number: resolves #26394


What is the current behavior?

When routerLink is applied to a non-anchor Ionic component (ion-item, ion-button), RouterLinkDelegateDirective always routes in-app on click. A ctrl/meta/shift/alt click, or a host with target="_blank", gets swallowed by the in-app navigation, so the browser never opens the link in a new tab. A plain <a routerLink> honors these intents, but the Ionic delegate doesn't, even though these components render a native anchor in their shadow DOM that's capable of the native new-tab behavior.

What is the new behavior?

RouterLinkDelegateDirective now adds a capture-phase click listener so it runs before Angular's RouterLink handler and the directive's own bubble-phase onClick. When the click should be handled natively (a ctrl/meta/shift/alt modifier is held, or the host target is set to anything other than _self), it calls stopImmediatePropagation() to cancel the in-app navigation but leaves preventDefault alone, so the shadow-DOM anchor can still open the tab. This mirrors the modifier set Angular's own RouterLink guards on. Normal clicks are unaffected and continue to navigate in-app. The listener is removed in ngOnDestroy.

Does this introduce a breaking change?

  • Yes
  • No

Other information

This supersedes #28976 by @j-oppenhuis, which first surfaced the target and modifier-click gap. Credited as co-author below.

To verify manually in the Angular preview, ctrl/cmd-click the two ion-item rows (a plain one and a target="_blank" one) and confirm each opens a new tab instead of navigating in place:
https://ionic-framework-git-fix-angular-routerlink-modifi-896c58-ionic1.vercel.app/angular/standalone/router-link

If you compare that against the main version of the same component, you'll be able to see how it's fixed:
https://ionic-framework-git-main-ionic1.vercel.app/angular/standalone/router-link

Co-authored-by: Jelle Oppenhuis jelle@siyou.nl

Read the original on github.com ↗