Holding Option/Alt does not allow selection of text inside Link

[levrik]

Provide a general summary of the issue here

While holding Option/Alt, you can usually select text inside links without triggering them.

🤔 Expected Behavior?

Being able to select text while holding Option/Alt like on native links.
Also the link should neither be followed nor a download should be triggered.

😯 Current Behavior

No selection possible, also the link gets triggered as soon as you lift the mouse button.
When keeping Option/Alt pressed, it triggers a download of the link, otherwise it navigates.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Hold Option while trying to select the text of the RAC Link and then the native link.

https://codesandbox.io/p/sandbox/crazy-hooks-sfs3lr

RAC.Select.Link.mp4

Version

React Aria Components 1.2.1

What browsers are you seeing the problem on?

Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Also the link should neither be followed nor a download should be triggered.

From what I see, Option+click on a native link does immediately trigger a download. So this is behaving correctly.

I don't see anything about Option+click being used for selection, I think that may be a convenient side effect. This also only happens in Chrome and Firefox. In Safari it starts a drag event. The drag event issue is tracked here #6618

A workaround does exist, you can copy the text in a link by right clicking.

I'm not fully convinced this is a bug, I think we can consider this to be normalization across browsers. We will need more opinions.
We'll also want to determine how many of these interactions exist. Is it just links, or what does Option actually indicate in an interaction.
Spec: https://html.spec.whatwg.org/multipage/links.html

[levrik]

@snowystinger Yeah. This does not seem to be defined by a standard and every browser uses a slightly different implementation.

From what I see, Option+click on a native link does immediately trigger a download.

Happens in Chromium-based browsers and Safari but not in Firefox. I might not have been clear here but I was also referring to Option->Press mouse button->Move cursor->Release mouse button which even in Chromium and Safari does not trigger a download. Detecting a mouse move before mouse release might be enough already here.

I don't see anything about Option+click being used for selection, I think that may be a convenient side effect.

I doubt it's a side-effect but an explicit choice. According to https://superuser.com/a/940347 it seems to have been implemented in Chromium 52 after it worked like this for some time in Firefox already. Safari/WebKit seems to be the only browser not implementing it this way.

In Safari it starts a drag event. The drag event issue is tracked here #6618

Maybe fixing this would already fix also the selection issue in other browsers.

A workaround does exist, you can copy the text in a link by right clicking

Seems to work in Chromium-based browsers only. In Safari it selects the text of the link on right click but doesn't give me an option to copy that text in the context menu. I could press Cmd+C. Firefox actually does nothing special on a right-click on a link. No selection, no way to copy.

Edge/Chromium

Safari

Firefox

I'm not fully convinced this is a bug, I think we can consider this to be normalization across browsers

I'm not asking for getting this re-implemented so it even works in Safari but rather that React Aria does not prevent it from happening (if possible).

[snowystinger]

Definitely not arguing to reimplement it. This is already in a really tough bit of code. It will be hard to even try not blocking it. I do not know that it's possible how things are currently implemented.

Thanks for looking up the additional information.