[HOLD for payment 2022-05-02] [$500] While trying to open the context menu on mWeb(Safari) on image attachment, it shows a blue box on the app - reported by @parasharrajat

[mvtglobally]

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

---

Action Performed:

1. Send a message with link on any Chat on Safari mWeb.
2. Hold press the link to open the context Menu.

Expected Result:

Context Menu should be shown and no blue boxes.

Actual Result:

No Context menu is shown instead a blue box covers most part of the screen.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.1.43-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Require fixing different component than issue - #8245

Expensify/Expensify Issue URL:
Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1646674279978599

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Triggered auto assignment to @flodnv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dylanexpensify]

Posted!
Internal: https://www.upwork.com/ab/applicants/1505934572388790272/job-details
External: https://www.upwork.com/jobs/~01a730802d2112b532

[melvin-bot]

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

[melvin-bot]

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

[dylanexpensify]

cc @parasharrajat

[Beamanator]

Hmm looks like some of our automation broke when melvin-bot came alive 🤔 I'm going to re-add Help Wanted and hopefully fix some broken automation today that made Melvin think melvin-bot actually assigned someone already

[mollfpr]

Proposal

Adding css to display none of callout information will be enough to resolve this. There's a function to add disable-select to body. The class will set some style -webkit-user-select: none !important and -webkit-touch-callout: none !important; so the callout information from ios will not showing.

Call the function ControlSelection.block(); before showing the bottom modal and only apply the function on small device and touchscreen device.

App/src/pages/home/report/ReportActionItem.js

Lines 98 to 102 in af0f42e

	showPopover(event, selection) {
	// Block menu on the message being Edited
	if (this.props.draftMessage) {
	return;
	}

    showPopover(event, selection) {
        // Block menu on the message being Edited
        if (this.props.draftMessage) {
            return;
        }

+        if (this.props.isSmallScreenWidth && canUseTouchScreen()) {
+            ControlSelection.block();
+        }
        ReportActionContextMenu.showContextMenu(
            ContextMenuActions.CONTEXT_MENU_TYPES.REPORT_ACTION,
            event,
            selection,
            this.popoverAnchor,
            this.props.reportID,
            this.props.action,
            this.props.draftMessage,
            this.checkIfContextMenuActive,
            this.checkIfContextMenuActive,
        );
    }

Before

Screen.Recording.2022-03-22.at.23.45.59.mov

After

Screen.Recording.2022-03-22.at.23.47.03.mov

[parasharrajat]

Question is that it was working before and what broke it? I would rather get the broken behavior fixed instead of patching more code.

The same location where you found ControlSelection.block(); should be attempted to be fixed first.

[MelvinBot]

📣 @mollfpr You have been assigned to this job by @Beamanator!
Please apply to this job in Upwork 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 📖

[mollfpr]

Thank you, guys! 🎉

I applied to Upwork, and will create the PR ASAP!

[dylanexpensify]

How we doing here?

[mollfpr]

PR is still on review.

[mollfpr]

Raise new PR with a new approach.

cc @rushatgabhane @Beamanator

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.56-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix bluebox showing when trying to open context menu #8672

If no regressions arise, payment will be issued on 2022-05-02. 🎊

[mollfpr]

@dylanexpensify The Upwork job is expired, can you please create a new one?

[dylanexpensify]

@mollfpr of course!

New postings -
internal: https://www.upwork.com/ab/applicants/1521414442738176000/job-details
external: https://www.upwork.com/jobs/~01917d5e367a54c20a

[dylanexpensify]

Getting payments sent today!

[mollfpr]

@dylanexpensify applied, thanks!

[dylanexpensify]

@parasharrajat please apply for reporting bonus 😄

[parasharrajat]

Done.

[dylanexpensify]

Offers sent!

[rushatgabhane]

Danke!

[dylanexpensify]

Payments sent, contracts ended, post closed. Thanks everyone!