[HOLD for payment 2023-11-09] [$500] Chat - The HTML code of the avatar is copied when copying the login name

[lanitochka17]

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: 1.3.86-4

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

Action Performed:

1. Open https://staging.new.expensify.com/
2. Log in with HT account
3. Navigate to any conversation with the user
4. Copy the login in the title of the conversation by highlighting the text from right to left and moving the mouse cursor over the avatar a little.
5. Paste the copied login into the login box on the main login page, you can go incognito.

Steps 2:

1. Open https://staging.new.expensify.com/
2. Log in with HT account
3. Navigate to the conversation with the user with whom you have correspondence history
4. Click the login in the conversation header
5. Triple-click the email address in the Email field in RHP.
6. Copy the highlighted text
7. Paste the text into the Compose Box

Expected Result:

When copying an account login through the conversation header, the avatar HTML code should not be copied to the buffer

Actual Result:

When copying the account login through the conversation header, the HTML code of the avatar is placed in the buffer

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

Bug6242259_1697662281250.Recording__553.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cbaee99371cf5444
• Upwork Job ID: 1714763515875631104
• Last Price Increase: 2023-10-25

[melvin-bot]

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

[melvin-bot]

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

[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

[melvin-bot]

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

[ashuvssut]

Proposal

This GitHub issue consists of 2 issues. I have divided my proposal into 2 sections: PART 1 and PART 2 for that purpose

PART 1: focuses on the first issue

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

When selecting the text along with the avatar svg, the styling code present within the avatar svg is also getting copied

Root cause

Here's a Video with voiceover explaining the Root cause. It's also explaining how my proposed solution works

Please unmute the audio in the following video

solution.mp4

Video Summary:
When we make a selection of the text starting from the right and all the way to the left, releasing our selection when hovering upon the svg, we are essentially selecting the text + styling code present within the svg. Thus, when we copy that selection, we end up with selecting the undesired svg styling code too.

See my proposed solution below:-

My solution that fixes this issue:-

App/src/components/Avatar.js

Lines 96 to 109 in 5d9649c

	<View style={iconStyle}>
	<Icon
	src={imageError ? fallbackAvatar : props.source}
	height={iconSize}
	width={iconSize}
	fill={imageError ? themeColors.offline : iconFillColor}
	additionalStyles={[
	StyleUtils.getAvatarBorderStyle(props.size, props.type),
	isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name) : {},
	imageError ? StyleUtils.getBackgroundColorStyle(themeColors.fallbackIconColor) : {},
	...props.iconAdditionalStyles,
	]}
	/>
	</View>

Add a sibling component with the <Icon> component that acts as a layer above that SVG avatar component. This prevents us from selecting the syling code present within the svg element.

   97                  <Icon
   ...                    src={imageError ? fallbackAvatar : props.source}
   ...                    .....
   ...                    .....
   ...                    .....
   108                 />
+  109                 <View style={StyleSheet.absoluteFill} />

PART 2: focuses on the second issue

The second issue is reproducible in staging only. This is not reproducible in development

Its not reproducible in dev, but I still have a good idea of what's causing it

1. When you copy the email from the RHN, you are somehow also copying the data-testid attribute's value
   

2. When you paste the copied content in the browser's address bar, that <_a Icon> is not included in the final pasted text

3. When you paste the copied conent in the Compose text area, the <_a Icon> is included in the final pasted text. I think this issue is related to the compose textarea content renderering logics

watch the video to cross check the facts that I mentioned above

demo.mp4

[bernhardoj]

The first issue is the same issue as #24399 which was closed.

[ashuvssut]

Along with this current issue, the following 3 issues could be fixed by using @bernhardoj 's solution:-

1. [$1000] Chat - Copy-pasting emoji names with keyboard shortcut doesn't paste the right emoji name #24399
2. Web - Copied text from Invite screen contain names of the avatars when paste to Notepad #27723
3. [$500] double click copy emoji text from emoji reaction popup copies extra text #29793

We just need to add these 3 lines in SelectionScraper/index.js

const replaceNodes = (dom, isChildOfEditorElement) => {
    let domName = dom.name;
    let domChildren;
    const domAttribs = {};
    let data;

+   if (dom.type === 'style') {
+      return {};
+   }

I am just a newbie contributor here, but I personally think that the solution I provided by using a sibling <View > is not that good as compared to @bernhardoj 's solution

[shamerKill]

You can use the shadow tag in HTML to block it.
Determine whether to enable shadow tags on the web client.

2023-10-20.13.43.58.mov