[Payment][$500] iOS - Chat - Black box surrounds URL when long pressing on the URL

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.3.99-0
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:

Action Performed:

1. Launch New Expensify app
2. Navigate to chat that has message with URL
3. Long press on the URL

Expected Result:

There will be no black box feedback when long pressing on the URL

Actual Result:

There is black box feedback surrounding the URL when long pressing on it

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

Bug6277704_1700060622390.RPReplay_Final1700016657__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ce3a970cdd6c1a1d
• Upwork Job ID: 1724808365605187584
• Last Price Increase: 2023-11-15
• Automatic offers:
• dukenv0307 | Contributor | 27697161

[melvin-bot]

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

[melvin-bot]

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

[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 - @narefyev91 (External)

[dukenv0307]

Proposal

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

Black box surrounds URL when long pressing on the URL

What is the root cause of that problem?

We use PressableWithSecondaryInteraction here and with inline prop, for native we render Text component.

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Line 56 in a9743a2

<PressableWithSecondaryInteraction

App/src/components/PressableWithSecondaryInteraction/index.native.js

Line 15 in a9743a2

const Node = props.inline ? Text : PressableWithFeedback;

And we don't pass suppressHighlighting prop which is supported for IOS native into this component so by default highlight styles appear when we long press on URL

App/src/components/PressableWithSecondaryInteraction/index.native.js

Line 22 in a9743a2

<Node

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

Here we should check if props.inline is true we will pass suppressHighlighting prop as true into this component

App/src/components/PressableWithSecondaryInteraction/index.native.js

Line 22 in a9743a2

<Node

What alternative solutions did you explore? (Optional)

If we don't want to always disable the highlight style for inline PressableWithSecondaryInteraction we can add an extra prop for this component to decide whether should disable the highlight style

Result

Screen.Recording.2023-11-15.at.23.28.58.mov

[narefyev91]

Proposal from @dukenv0307 looks good to me #31377 (comment)
In my view better to use alternative solution to have ability to re-use prop on any page - where it will be necessary
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @cristipaval, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[dukenv0307]

@narefyev91 The PR is ready for review.

[alexpensify]

Catching up from being OOO, it looks like this one merged but waiting for the automation to kick in here.

[alexpensify]

@cristipaval any thoughts as to why automation hasn't ran here yet?

[cristipaval]

Hm.. This is weird. It might be an one time error.

[alexpensify]

Ok, here we go since yesterday marked 7 days since the PR was merged:

The payment summary:

• External issue reporter N/A
• Contributor that fixed the issue @dukenv0307 $500
• Contributor+ that helped on the issue and/or PR @narefyev91 payment handled by vendor

Upwork Job: https://www.upwork.com/jobs/~01ce3a970cdd6c1a1d

Extra Notes regarding payment: There appears to be an automation issue and @cristipaval confirmed this one is ready. I'm going to continue the payment process.

[alexpensify]

@narefyev91 when you get a chance, can you share if there is a regression test needed here and I'll reopen this one? Thanks!

[alexpensify]

All set here, closing-- I've completed the payment process in Upwork.