Middle mouse button click does not open link in new tab when using Safari

[raphaelbeckmann]

Version:

• @inertiajs/react version: 1.0.14

Describe the problem:

Clicking an InertiaLink with the middle mouse button opens the page in the same tab. I would expect it to behave like a normal a link, which opens the page in a new tab when using the middle mouse button.

Steps to reproduce:

Open https://inertiajs.com in Safari and click on a link using the middle mouse button. Result: It opens in the current tab, not a new tab. Open https://inertiajs.com in Chrome and click on a link using the middle mouse button. Result: It opens in a new tab.

[shengslogar]

Interestingly, this seems to be isolated to the React wrapper (which, as you referenced, inertiajs.com is built on) and doesn't affect Vue. The Ping CRM demo app uses the Vue adapter and works as expected in Safari.

Comparing the Vue and React link components doesn't yield anything obvious. Wondering if it has something to do with some underlying React thing.

[derrickreimer]

I'm attempting to reproduce -- do you happen to have OS/browser versions where you observed this behavior?

[shengslogar]

Hey @derrickreimer, I just repro-ed this issue in Safari on inertiajs.com using my MX Master's middle button. Chrome and Firefox work as expected.

• macOS 14.5 Sonoma
• Safari 17.5 (19618.2.12.11.6)
• Chrome 126.0.6478.63
• Firefox 127.0.1

[derrickreimer]

Pardon my ignorance 😅 is "middle click" a different action than Command+Click (on macOS)?

[shengslogar]

Yes! Command + Click (macOS) = Ctrl + Click (Windows) which is simply a modifier key + a normal click. Middle click is an entirely separate event. Looks like in JavaScript this is considered an auxclick. I never use the middle click button myself so this is a learning experience for me too!

For the vast majority of browsers that map middle click to opening a link in a new tab, including Firefox, it is possible to cancel this behavior by calling preventDefault() from within an auxclick event handler.

https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#preventing_default_actions

[shengslogar]

Interestingly, it looks like there's no way to trigger middle clicks on macOS with the default trackpad or Magic Mouse, but apart from finding a mouse with a middle click button (triggered by pressing down on the scroll wheel), there are utilities that allow you to simulate. https://github.com/artginzburg/MiddleClick-Sonoma Oh, the edge cases!

[derrickreimer]

Very interesting! It looks like there's a long standing WebKit bug that causes onclick to fire for aux clicks :( https://bugs.webkit.org/show_bug.cgi?id=22382. I don't believe there's technically a way to differentiate an aux click from a normal click in Safari (until this bug is fixed).

[derrickreimer]

Closing this one since it's not actionable on our part. If Safari fixes the bug, this one should heal itself.

[shengslogar]

Reported in 2008, oof. Were you able to figure out why middle click with the Vue.js wrapper (http://demo.inertiajs.com) works in Safari?

[derrickreimer]

Ohh I may have spoken too soon! It appears there's a button prop on MouseEvent that we could theoretically key off of in the intercept logic: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button#value (I haven't confirmed this, but perhaps by default Vue doesn't trigger the click handlers on middle click in Safari, unlike React).

[shengslogar]

You're on to something!

https://codepen.io/shengslogar/pen/rNgKVGL

Safari left click:

Safari middle click:

Firefox left click:

Firefox middle click: