[$500] Chat - Link is highlighted when right clicking on it on Safari

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.1.4
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #31465

Action Performed:

. Open any report
2. Send a link
3. Long press or right-click on the link

Expected Result:

No highlight style appears on the link

Actual Result:

On Web/Safari the link is highlighted and on mobile Safari the whole chat is being highlighted when right clicking or tapping and holding on a link

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6284762_1700524432645.Recording__501.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c01e3d3e075b8c26
• Upwork Job ID: 1726751687719890944
• Last Price Increase: 2023-11-20

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01c01e3d3e075b8c26

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[abzokhattab]

not sure if this is a bug https://discussions.apple.com/thread/2165827 https://www.reddit.com/r/MacOS/comments/k8cipw/safari_right_clicking_google_links_highlights_too/

[erquhart]

Agreed, Safari doesn't just select links, it selects any text when you right-click. Try clicking something that's just text, same thing. Feature not a bug.

[Tony-MK]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Chat - Link is highlighted when right clicking on it on Safari

What is the root cause of that problem?

The root cause of the problem is that, by default, Safari selects the text in the link when it is right-clicked. This is most likely not a bug, but different platforms, like Chrome, don't highlight the text in this situation. Therefore, it is more about improving the consistency of the app across multiple platforms.

What changes do you think we should make in order to solve the problem?

Use css attributes -webkit-user-select: none;, user-select: none; and possibly -ms-user-select: none; for consistency with other browsers. Apply them to the link elements in the chat message. This will ensure that the links do not get highlighted across all platforms. You can read more over here: User Selection

{
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard */
}

[Tony-MK]

@adelekennedy Could you please ask @eVoloshchak for a second opinion before we close, especially when I have new findings on this prospal. It opposes what the other contributors say, and I would just like another opinion. Sorry, but thank you.

[eVoloshchak]

Agree with closing this one out
This is a normal behavior for Safari (not only Safari, system apps like Contacts, Notes, Mail, TextEdit, Dictionary all select a word when you right-click it)