[HOLD for payment 2022-10-31] [$250] Chrome Web - Copy/pasting brings up an image paste growl error

[mvtglobally]

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. Create a chat where User A sends 2 messages
2. User B responds
3. User B clicks to highlight the bottom message from User A
4. User B pastes the message in the compose box

Expected Result:

Message should paste without any issue

Actual Result:

Error (growl) displayed when user tries to paste

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.1-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: Issue reported by: @quinthar Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1663278146401119

View all open jobs on GitHub

[melvin-bot[bot]]

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

[amyevans]

I've tried reproducing locally, on staging, and on production with a number of different test strings, including the exact string from the screenshot (Testing 2 3 4 (sending while [email protected] app is not running)) but haven't been able to reproduce.

The growl error is triggered here: https://github.com/Expensify/App/blob/main/src/components/Composer/index.js#L306, so following that code, the DOM parser found images in it - but obviously looking at the string there are no visible images.

@quinthar can you provide any additional details that might help in reproducing this?

[amyevans]

Additionally, @mvtglobally, was the QA team able to reproduce this?

[amyevans]

Also reported by @coleaeason in Slack. Same question - any additional details you can provide to help in making this reproducible?

[amyevans]

I've also now tested sending the text from an Android simulator in case that's the source of the issue, but still unable to reproduce. Logging this line, we get:

<meta charset='utf-8'><comment><span>Testing 2 3 4 (sending while </span><div><a href="mailto:[email protected]">[email protected]</a></div><span> app is not running)</span><br></comment>

[mvtglobally]

@amyevans i was able to reproduce at the time of logging this issue. I am not able to repro now, but I will also ask team to check if anyone can reproduce

[melvin-bot[bot]]

@amyevans Whoops! This issue is 2 days overdue. Let's get this updated quick!

[amyevans]

Sounds good, thank you @mvtglobally!

[amyevans]

Demoting to weekly until we have proper repro confirmed

[amyevans]

Friendly bump @mvtglobally

[mvtglobally]

@amyevans It doesn't seem to be repro any more

https://user-images.githubusercontent.com/43995119/194129905-5d3dffc9-3d3d-4e12-9002-632a4f588c05.mp4

[amyevans]

Okay thanks, I'm going to close and we can reopen if we have reason to in the future.

[coleaeason]

I think these are the reproduction steps:

1. Have a message thread where one person has sent 2 messages
2. the opposite person responds
3. Click to highlight the bottom message from person 1
4. Paste the message in the compose box, get growl.

i can reproduce this everytime using these steps

[amyevans]

Got it, reproduced with those steps! Thanks @coleaeason

I'll update the OP and release for external proposals.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[abekkala]

Reassigning the External label as this is a Daily and I'm ooo

[abekkala]

Oh, I think @NikkiWines is already considered the External assignment anyway??

[amyevans]

@abekkala Nikki is the CME assignment but this is missing a CM assignment, can you try removing the External label and then readding it?

[melvin-bot[bot]]

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

[thesahindia]

Not overdue. No proposal yet.

[NikkiWines]

Dropping to weekly while we wait for proposals.

[mollfpr]

Proposal

This happens because when we paste with cmd+v or the clipboard type is text/html there's an empty image tag.

While we have the empty tag <img>, we try to get the image tag source but because the <img> doesn't have the src prop the fetch process is throwing an error. https://github.com/Expensify/App/blob/7044ab2b96067081c8f67191e51fa859dba66d91/src/components/Composer/index.js#L290-L294

Solution My solution is to add more conditions to paste images not just depending on images count but also the src prop of the first image we will use. https://github.com/Expensify/App/blob/7044ab2b96067081c8f67191e51fa859dba66d91/src/components/Composer/index.js#L293-L294

diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index a441d114c..c20fe1f61 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -290,7 +290,7 @@ class Composer extends React.Component {
             const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;
 
             // If HTML has img tag, then fetch images from it.
-            if (embeddedImages.length > 0) {
+            if (embeddedImages.length > 0 && embeddedImages[0].src) {
                 fetch(embeddedImages[0].src)
                     .then((response) => {
                         if (!response.ok) { throw Error(response.statusText); }

Before

https://user-images.githubusercontent.com/25520267/195868203-a2c6b3f2-49f7-4de9-b2db-0a80988242a9.mov

After

https://user-images.githubusercontent.com/25520267/195868359-1211199d-0e12-476b-b2fd-8f7638b4fef9.mov

By the way, you can reproduce the issue by selecting the last chat of every thread and trying to highlight the text with a double-click on the empty space, not on the text.

[thesahindia]

@NikkiWines, I like @mollfpr's proposal.

C+ reviewed 🎀👀🎀

[NikkiWines]

Yep! That looks good! Re-adding the External label to get a CM on this

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[NikkiWines]

@isabelastisser could you assign @mollfpr to this job, please? Thank you!