Web - Chat - Edited gets copied after selecting and copying an edited comment

[IuliiaHerets]

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

---

Version Number: 9.0.25-10
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #45150
Email or phone of affected tester (no customers): applausetester+nl460@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Send a comment in a chat
3. Edit that comment
4. Start selecting the edited comment from the start of the text beyond the end of the comment
5. CTRL + C to copy or right click on the comment click on copy to clipboard while the selection is still on the text
6. Paste the copied content elsewhere

Expected Result:

"(edited)" doesn't get copied alongside the text

Actual Result:

"(edited)" gets copied with the text

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6585067_1724837936571.bandicam_2024-08-28_12-34-11-320.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @OfstadC (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@OfstadC FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[excile1]

Proposal

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

When copying a message by highlighting it and pressing CTRL+C, (edited) can be highlighted and copied along with the text.

What is the root cause of that problem?

The root cause of this issue is that the (edited) label is treated as normal text, and you can highlight it and copy it as you would be able to with other text.

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

The solution to this problem is making sure we assign user-select: none; CSS property to prevent the ability for the user to select the (edited) label and also to prevent them from copying it.
This can be done by altering the editedLabelStyles/index.tsx file, which contains the styles for the label.

App/src/styles/utils/editedLabelStyles/index.ts

Lines 1 to 12 in 9437d98

	// eslint-disable-next-line no-restricted-imports
	import display from '@styles/utils/display';
	// eslint-disable-next-line no-restricted-imports
	import flex from '@styles/utils/flex';
	import type EditedLabelStyles from './types';
	const editedLabelStyles: EditedLabelStyles = {
	...display.dInlineFlex,
	...flex.alignItemsBaseline,
	};
	export default editedLabelStyles;

we can import the userSelect styles by adding: import userSelect from '../userSelect';, and then change the editedLabelStyles constant to include the new style:

const editedLabelStyles: EditedLabelStyles = {
    ...display.dInlineFlex,
    ...flex.alignItemsBaseline,
    ...userSelect.userSelectNone,
};

The result:

Screen.Recording.2024-08-28.at.23.15.51.mp4

[OfstadC]

Working on this now

[OfstadC]

Okay - so "edited" doesn't copy when double clicking and copying, nor when selecting the actual text, but it does if you drag your cursor over "edit" - It works this way in Slack too (just tested) - so I don't think this is a bug.