Handle Cmd / Ctrl click to open in a new tab

[buschtoens]

When a link is clicked with Cmd / Ctrl it should open in a new tab.

The reason it does not work right now is that we always call event.preventDefault(), if @preventDefault is true / unset.

I think there's different solutions to this.

For one, we can add another boolean: @allowNewTab
If true (default) it will check whether event.currentTarget is an <a> element and if Cmd / Ctrl are pressed, in which case it will not call event.preventDefault(), even if @preventDefault is true.

In addition to this, we can also add another action openInNewTab, that opens href in a new tab.

Big thanks to @tchak13, who reported this via Twitter:
https://twitter.com/tchak13/status/1106149903317852160

[rtablada]

@buschtoens In our app we mimicked this code in ember-href-to that checks that the left click does not have modifiers.

https://github.com/intercom/ember-href-to/blob/master/addon/href-to.js#L35-L39

GitHub

intercom/ember-href-to

🔗 A lightweight alternative to {{link-to}}. Contribute to intercom/ember-href-to development by creating an account on GitHub.

[buschtoens]

Thanks for the link, @rtablada! 😊
I would have forgotten to handle right clicks.

[buschtoens]

There's also the possibility of Cmd or Ctrl clicking a button, which would open the form submission in a new tab. Contrary to <a> I don't think that we would ever want this behavior for <form> in Ember, so I guess by default Cmd or Ctrl clicking a <button> should still be event.preventDefault()'ed.

It's probably easiest to understand, if I don't expose yet another flag and instead just bake all of this (including @allowNewTab) into @preventDefault. If users need more sophisticated behavior, they can just write their own event handler.

[buschtoens]

Released in https://github.com/buschtoens/ember-link/releases/tag/v1.2.1. 🥳

GitHub

Release Release 1.2.1 · buschtoens/ember-link

🐛 Bug Fix

#473 Check button property and modifier key states before calling preventDefault() (@Turbo87)

Committers: 1

Tobias Bieniek (@Turbo87)