[Hold for payment 22 July] Unable to highlight text in mWeb or in small window size

[isagoico]

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

https://www.upwork.com/jobs/~01daa81ee3a89e111e

---

Action Performed:

1. Navigate to e.cash in mWeb or Web
2. Try to highlight text in a conversation

Expected Result:

User should be able to highlight text in the conversation.

Actual Result:

User is unable to highlight text in conversation in mWeb and in Web (if the window is small enough to hide the LHN)

Workaround:

N/A

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App ✔️
Mobile Web ✔️

Version Number: 1.0.77-2

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Recording.196.mp4

View all open jobs on Upwork
https://www.upwork.com/jobs/~01daa81ee3a89e111e

---

From @mallenexpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1626201217178800

Unable to copy specific text in a message on e.cash desktop when width is minimized and LHN is hidden.

[MelvinBot]

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

[MelvinBot]

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

[parasharrajat]

We need to fix the logic that was added to fix the Context Menu on the mobile devices.
It currently blocks the selection for all Smallscreen devices which includes resized browsers on the Web and desktop.
There are three places we are blocking selection.
https://github.com/Expensify/Expensify.cash/blob/bb5ae3e99ca3ea85a0dc7505429981f5756699e0/src/pages/home/report/ReportActionItemFragment.js#L68
https://github.com/Expensify/Expensify.cash/blob/bb5ae3e99ca3ea85a0dc7505429981f5756699e0/src/pages/home/report/ReportActionItem.js#L275
https://github.com/Expensify/Expensify.cash/blob/bb5ae3e99ca3ea85a0dc7505429981f5756699e0/src/components/RenderHTML/index.js#L11

To fix this issue we need to replace

a) the isSmallScreenWidth check with !canUseTouchScreen() || !isSmallScreenWidth for 1 & 3.
b) the isSmallScreenWidth check with this.props.isSmallScreenWidth && canUseTouchScreen() && ControlSelection.block() for 2.

As a end result

1. We block the selection only on the M-Web Devices which have smaller screen sizes and have a touch screen.

[MelvinBot]

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

[iwiznia]

Nice, that sounds good @parasharrajat. @laurenreidexpensify can you hire him?

[laurenreidexpensify]

hired!