[HOLD for payment 2022-04-01] [$1000] Long press on image doesn't open the context menu - Reported by @rushatgabhane

[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. Open app
2. Go to any chat with attachment image
3. Hard press on the image

Expected Result:

Long press on image should open the context menu.

Actual Result:

Long press on image doesn't open the context menu. (Long press on side of image does)

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.33-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-20220116-194114.mp4

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

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[stephanieelliott]

Was able to reproduce this on iOS. Posted to Upwork: https://www.upwork.com/jobs/~0109b6b91df96f2613

[MelvinBot]

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

[MelvinBot]

Current assignee @roryabraham is eligible for the Exported assigner, not assigning anyone new.

[parasharrajat]

@rushatgabhane I have a few questions.
What should be shown in the contextMenu? Do you expect to show the main menu the same as the message menu?
We don't have any specifc options for images for now.

[rushatgabhane]

@parasharrajat good question. Except for edit comment, I'd expect the context menu to have all other options i.e. unread, copy and delete.

[parasharrajat]

Ok. Thanks for confirming.

[stephanieelliott]

2xd price to $500

[stephanieelliott]

2xd price to $1000

[aswin-s]

Reason:

Image thumbnail is wrapped with in a TouchableOpacity, which captures all touch events at thumbnail level.

App/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

Lines 47 to 64 in ddae433

	<AttachmentModal
	sourceURL={source}
	isAuthTokenRequired={isAttachment}
	originalFileName={originalFileName}
	>
	{({show}) => (
	<TouchableWithoutFocus
	style={styles.noOutline}
	onPress={show}
	>
	<ThumbnailImage
	previewSourceURL={previewSource}
	style={styles.webViewStyles.tagStyles.img}
	isAuthTokenRequired={isAttachment}
	/>
	</TouchableWithoutFocus>
	)}
	</AttachmentModal>

Context menu is opened via longPress action defined at ReportActionItem level, which is a parent component to ImageRenderer

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

Lines 152 to 157 in 9d6e07a

	<PressableWithSecondaryInteraction
	ref={el => this.popoverAnchor = el}
	onPressIn={() => this.props.isSmallScreenWidth && canUseTouchScreen() && ControlSelection.block()}
	onPressOut={() => ControlSelection.unblock()}
	onSecondaryInteraction={this.showPopover}
	preventDefaultContentMenu={!this.props.draftMessage}

Since the inner touchable captures the tap event it never reaches the PressableWithSecondaryInteraction HOC which fires the onSecondaryInteraction callback for showing popup.

Proposal:

Move AttachmentModal logic to ReportActionItem level and control the visibility of the modal from onPress callback of PressableWithSecondaryInteraction.

            <PressableWithSecondaryInteraction
                ref={el => this.popoverAnchor = el}
                onPressIn={() => this.props.isSmallScreenWidth && canUseTouchScreen() && ControlSelection.block()}
                onPressOut={() => ControlSelection.unblock()}
                onPress={this.showAttachmentModal}
                onSecondaryInteraction={this.showPopover}
                preventDefaultContentMenu={!this.props.draftMessage}

            >

We could go further ahead and introduce an AttachmentModal route at the RootNavigation level and navigate to the modal on tapping image thumbnail. This way a nested Modal inside each ReportActionItem could be removed.

[stephanieelliott]

Hey @parasharrajat, any feedback on the proposal above?

[parasharrajat]

@stephanieelliott Sorry, I was sleepy when I reviewed it so couldn't leave a comment.

@aswin-s

Move AttachmentModal logic to ReportActionItem level and control the visibility of the modal from onPress callback of

I don't see how will you do that in your proposal.

We could go further ahead and introduce an AttachmentModal route at the RootNavigation level and navigate to the modal on tapping image thumbnail. This way a nested Modal inside each ReportActionItem could be removed.

It will create more challenges. Do we want to make the attachment URL accessible? I think no. As attachments are related to reports. It would need to be sub route of the report. I don't think this is a good approach.

---

There are other ways. You can take a look at BaseAnchorForCommentsOnly to see one. There are a few challenges with that approach. Like MiniMenu should be hidden when the menu is opened. How will you highlight the row when the menu is opened? Other such things.

[ahmdshrif]

@kadiealexander it's in review

[roryabraham]

Sorry, the delay here is on me. Catching up now...

[botify]

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

• Fix: Long press on image doesn't open the context menu #8018

If no regressions arise, payment will be issued on 2022-03-24. 🎊

[parasharrajat]

@kadiealexander Could you please hold C+ payment for me on this issue until I request/ping you. I would like to wait for a week. Please put this on weekly so that you don't get notifications from MelvinBot. Thanks.

[ahmdshrif]

@kadiealexander but it will be good if my payment not hold 😄

Thanks

[kadiealexander]

@ahmdshrif of course! I'll issue your payment and @rushatgabhane's reporting bonus today.

@parasharrajat I'll keep yours on hold, let me know when you're ready.

[kadiealexander]

Paid:

• @ahmdshrif - Done! Thanks for your work Ahmed.
• @rushatgabhane - Done! Thanks Rushat.
• @parasharrajat - on hold as discussed.

[ahmdshrif]

Thanks @kadiealexander

[kadiealexander]

@parasharrajat how are you tracking for this? Still want me to keep it on hold?

[parasharrajat]

Nope @kadiealexander. You are good to go.

[kadiealexander]

@parasharrajat just sent you a contract, please accept!

[parasharrajat]

@kadiealexander Done.

[parasharrajat]

Bump @kadiealexander.

[kadiealexander]

Apologies @parasharrajat, I was ooo! All paid now :)

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[parasharrajat]

Bot successfully found one true regression but this PR is very old so we have to continue on the other issue.

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.