[$500] mWeb - Chat - Long display name is copied along with ellipsis and "New messages" text in chat header

[kbecciv]

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.94.0
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #30476

Action Performed:

1. Go to staging.new.expensify.com
2. Open chat with user with a long display name.
3. Highlight the name on the chat header and copy the name.
4. Long press on the composer and paste it.
5. Note that ellipsis and 'new message' is copied over.

Expected Result:

Only the display name, which is the email, is copied.

Actual Result:

The display name is copied along with the ellipsis and 'New messages'.

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

Bug6259302_1698838376654.Screen_Recording_20231101_084255_Chrome.mp4

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018617982cf69dd0f6
• Upwork Job ID: 1719687482436833280
• Last Price Increase: 2023-11-01

Issue Owner

Current Issue Owner: @kbecciv

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018617982cf69dd0f6

[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 - @situchan (External)

[Krishna2323]

Proposal

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

mWeb - Chat - Long display name is copied along with ellipsis and "New messages" text in chat header

What is the root cause of that problem?

We are not applying dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} to .... in DisplayNamesWithTooltip and selectable={false}.

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

We should apply dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} & selectable={false} to <Text>....</Text> in DisplayNamesWithTooltip.

We are already using this prop and dataSet in multiple places.

Result

[mpiniarski]

Proposal

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

On mWeb, when copying long chat name, ellipsis and New messages text get's copied as well.

What is the root cause of that problem?

In components/DisplayNames/DisplayNamesWithTooltip.js, ellipsis text is selectable enabling use the native copy and paste functionality, even though according to API is should be false by default.

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

Setting selectable to false against the expected API is a short term solution. Instead, I suggest making a fix in Expensify/react-native-web.

This way we will have consistent behaviour in native apps and web. Note then on Android App it's not possible to select Display Name like that in order to copy it. If we want to add such feature, we should add Copy chat name action in the 3-dot menu or on long press.

https://github.com/Expensify/react-native-web/blob/master/packages/react-native-web/src/exports/Text/index.js#L144

We should handle case when selectable is null the same way as when selectable === false

  selectable == null && styles.notSelectable,

What alternative solutions did you explore? (Optional)

Make a PR directly to necolas/react-native-web

N/A

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @mpiniarski! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[garrettmknight]

@kbecciv I just tested on chrome mweb and the copy/paste didn't include the ..., but it also didn't include the whole name. Can you point me to the test this is coming from? Thanks!

[Krishna2323]

@garrettmknight, can reproduce on mWeb chrome.

WhatsApp.Video.2023-11-03.at.20.13.36.mp4

[kbecciv]

@garrettmknight This issue is associated with the following PR: #30476

[kbecciv]

Issue is reproducible

Screen_Recording_20231106_225954_Chrome.mp4

[garrettmknight]

Ok, got it - so you have to manually select the ellipsis? Since you're manually attempting to select the ellipsis, that doesn't seem unintended. I suppose the 'New Message' part is but that's an extreme edge case.

If you force tap/long press to select the name and copy/paste, it only pastes the name without an ellipsis and "New Message" so we're good there.

@kbecciv can you point me to the test for this one so we can clarify that this isn't a relevant bug?

[Krishna2323]

@garrettmknight, ellipsis is still copied without manually attempting to select it. Pls check the video.

WhatsApp.Video.2023-11-06.at.23.47.06.mp4

[garrettmknight]

Maybe I'm missing the reproducible step there, but it looks like you're doing the same thing and getting different results - can you explain how the third attempt differed from the first two?

[Krishna2323]

@garrettmknight, I'm just trying to copy the display name, every time I'm trying to do the same thing but results are different.

[garrettmknight]

Got it - I think that's unexpected, but an edge case.