[HOLD #22142] [$1000] Web - Triple clicking on an edited text selects the "edited" label

[kbecciv]

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

---

Action Performed:

1. Open a chat
2. Post a comment
3. Edit the last comment you posted
4. Triple click on the comment to select it

Expected Result:

The message is selected

Actual Result:

The edited label is selectable

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.43-6
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
Notes/Photos/Videos: Any additional supporting documentation

Test78_Editedselected-1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @daveSeife
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689887962165499

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bee694b754e4a650
• Upwork Job ID: 1683654217343696896
• Last Price Increase: 2023-07-25

[melvin-bot]

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

[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

[neonbhai]

Proposal

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

Triple clicking on an edited text selects the "edited" label

What is the root cause of that problem?

The (edited) message is rendering via this code:

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

Lines 133 to 145 in b7d17e0

	<Text
	fontSize={variables.fontSizeSmall}
	color={themeColors.textSupporting}
	style={[editedLabelStyles, ...props.style]}
	>
	<Text
	selectable={false}
	style={[containsOnlyEmojis ? styles.onlyEmojisTextLineHeight : undefined, styles.w1, styles.userSelectNone]}
	>
	{' '}
	</Text>
	{props.translate('reportActionCompose.edited')}
	</Text>

The outer <Text> tag is missing the selectable={false} prop and userSelectNone style.

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

On the outer Text tag, we should set the selectable prop as false, and add the userSelectNone style. Also, remove the same from the child Text tag so as to avoid redundancy.

What alternative solutions did you explore? (Optional)

xx

[sophiepintoraetz]

Able to reproduce this

[melvin-bot]

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

[melvin-bot]

Current assignee @sophiepintoraetz is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[sophiepintoraetz]

Not overdue - waiting on proposals

[jigartankhupp]

Proposal

---

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

Triple clicking on an edited text selects the "edited" label

---

What is the root cause of that problem?

The root cause of the text selection behavior when double-clicking or triple on text in a browser is the default behavior of the browser itself. When we double-click or triple on text in most modern browsers, the default behavior is to select the word or paragraph that we have double-clicked or triple on. This behavior is implemented by the browser's built-in user interface and is designed to make it easy for users to select text for copying, pasting, or other operations.

---

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

To solve the problem and disable text selection when double-clicking or triple on text in our CSS code, we can make the following changes:

-moz-user-select:none; /* firefox */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */

Final Result

Screen.Recording.2023-07-25.at.11.04.40.AM.mov

---

What alternative solutions did you explore? (Optional)

We can add the selectable={false} & userSelect="none" in the outer <Text /> component. https://reactnative.dev/docs/text#selectable. Also we can remove the selectable={false} props from the inner <Text /> Component.

I hope my proposal will accept.
Thanks

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~012a5ed1b4a78d3b2c

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[jigartankhupp]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~012a5ed1b4a78d3b2c

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[sophiepintoraetz]

@0xmiroslav - mind reviewing the proposal, please?

[ginsuma]

Similar issue get hold #22142 (comment).

[melvin-bot]

@sophiepintoraetz, @0xmiroslav Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[sophiepintoraetz]

Holding for #22142

[sophiepintoraetz]

Holding for #22142

[sophiepintoraetz]

Dropping to weekly while we're waiting on the hold.

[sophiepintoraetz]

Dropping to monthly - the referenced issue is on hold for another bug.

[sophiepintoraetz]

Still holding

[sophiepintoraetz]

Still holding.

[sophiepintoraetz]

holding still

[sophiepintoraetz]

I'm going to close this issue because 1) the issue we were held on is no longer reproducible and 2) this is does not affect a core flow.