Component copy-paste not working (Firefox)

[archiewood]

Bug Description I tried to copy a page into an email. Not all components copied as expected. In particular:

• (Bar)Charts
• BigValue

do not copy correctly

Severity

• [ ] High - I'm not able to use Evidence until this bug is fixed
• [x] Medium - I'm able to use Evidence, but a feature I need to use is not working
• [ ] Low - I'm able to keep using Evidence as normal, but flagging this for the team to fix

Error Messages and Screenshots

Workarounds for barcharts, download images and insert manually. No clear workaround for BigValue

Environment Information Operating System: MacOS Package versions: 15.0.1

[archiewood]

Once we fix this, this would be a good candidate for a UI test

[mcrascal]

• Copy/ paste logic starts here (copyTarget).
• Possibly impacted by recent changes to resize behaviour on charts.
• Complete includes a UI test for this. Consider hashing the clipboard contents (playwright supports accessing clipboard contents), or pasting into a text field.

[csjh]

I think it's just 2 counts of select-none -- BigValue needs the select-none tailwind class to be toggled when a copy event happens, and the charts need the select-none that's placed on the container div (by echarts) to be overriden in the generated img.

[ItsMeBrianD]

@archiewood I am unable to reproduce this issue on the current main branch;

https://user-images.githubusercontent.com/10779616/235983236-8ad16249-cdb8-463f-9e66-0ad821d53a70.mp4

[archiewood]

Hmmm interesting.

Maybe this was fixed recently

Are you able to reproduce on the datacouncil demo?

https://evidence-datacouncil-demo.netlify.app

[archiewood]

(It's running v15.0.0)

[ItsMeBrianD]

Works properly for me there; which browser are you using? I'm on MacOS with Chrome

[hughess]

One other thing I've noticed on this issue is that the copy-paste can behave differently based on different paste destinations. These are the ones I've been trying it on:

• Web email
• Desktop email (Outlook for me)
• Microsoft Word
• PowerPoint
• Google Docs
• Google Slides
• Notion

[archiewood]

Firefox 🤷🏼‍♂️

[archiewood]

Digging into this a little:

• It seems to be Firefox only (not Safari, Chrome) on MacOS for me
• It seems to be the copy operation (rather than the paste) as if I copy on Chrome and paste on Firefox it works as expected

[csjh]

In my testing, putting user-select: all on the BigValue/generated img for charts + forcing Svelte to update synchronously via flush() fixes this. Not sure how big the performance hit of it on large pages would be though.

[ItsMeBrianD]

@csjh do you want to open a PR with the fixes you did?