Copied text has yellow background when pasted into gmail or google docs.

[rlpacht]

Do you know what might cause this and if there is a way to make that not happen?

[nkbt]

wow

looks like text is copied as rich text. I suppose the place you copy it from has yellow background, right?

[rlpacht]

It doesn't. I'm copying the text from a standard input.

[nkbt]

Any example how to reproduce this?

[nkbt]

oh actually it works like that from codepen example!

[nkbt]

Opened issue in upstream sudodoki/copy-to-clipboard#43

[nkbt]

sudodoki/copy-to-clipboard#43 (comment)

copy-to-clipboard@3.0.5 is published with the fix.
Please, update your dependencies and problem should go away

[nkbt]

Published react-copy-to-clipboard@4.2.3 with updated libs

[rlpacht]

Thank you for your help!

[nkbt]

No worries 👌

[davidkaminsky]

I'm using version 4.2.3 and I'm still seeing this it's just that the background is light grey now. Is this expected? There is no grey background for the text. Attached are some screenshots.

[dsacramone]

Same (with the light gray). Is there a fix for this - I can't use it, as it does this. Please let me know. Thanks a bunch.

[nkbt]

Browsers keep doing some awkward stuff...

[nkbt]

Can't reproduce anymore. Works well for me in several browsers.

[webuniverseio]

So this is still an issue in copy-to-clipboard dependency (still happens to me in Chrome): sudodoki/copy-to-clipboard#46, but there is a workaround.

My implementation of the workaround:

//your-component.js
<CopyToClipboard key="copy" text={`CopyToClipboard\n${textYouWantToCopy}`}>
  Copy text
</CopyToClipboard>

//main.js
document.addEventListener('copy', e => {
  const textContent = e.target.textContent;
  const filterText = 'CopyToClipboard\n';
  if (textContent.startsWith(filterText)) {
    e.clipboardData.setData('text/plain', textContent.replace(filterText, ''));
    e.preventDefault();
  }
});

[webuniverseio]

@nkbt I'm thinking that this might be added inside react-copy-to-clipboard, either behind the boolean property or even as a default behavior.

[webuniverseio]

Also not sure if that matters but for me issue is happening when text attribute has multi line string for example:

<CopyToClipboard key="copy" text={`blah\nblah\nblah`}>
  Copy text
</CopyToClipboard>

Example above would have a background (inherits color from body & background from html elements).

However when it is not a multi-line string, no problem.

[nkbt]

Thanks @szarouski for all the examples!

[nkbt]

I've updated http://nkbt.github.io/react-copy-to-clipboard/ to have multiline textarea and tried to paste to google docs - no issues. Do I need to do something else to reproduce it?

I also updated https://codepen.io/nkbt/pen/eNPoQv?editors=0010, so if you can clone it and make "buggy" - that would be great

[wdlb]

I managed to reproduce the issue with this pen: https://codepen.io/anon/pen/aKMRxO. The buggy behaviour happens when copying from Chrome to Google Docs or Microsoft Word.

[alexisig]

A cleaner workaround:

onCopy(copiedText) {
    navigator.clipboard.writeText(copiedText)
}

render() {
    return (
        <CopyToClipboard onCopy={this.onCopy} key="copy" text={`some\ntext\nhere`}>
            Copy text
        </CopyToClipboard>
    )
}

[mrjosshi]

any help here?

[nikkirostollan]

@anilljoshi The underlying package (copy-to-clipboard) has been updated, and you can now pass along a format in the options prop to avoid capturing some of the underlying styles.

1. Check you're yarn-lock or package-lock to see if your version for copy-to-clipboard is 3.2.0 or higher, then upgrade as necessary.

2. Pass the options prop an object containing:{format: 'text/plain'}

<CopyToClipboard onCopy={this.onCopy} text={text} options={{format: 'text/plain'}}>
{...children}
</CopyToClipbaord>

Works like a charm :)