Clipboard.js: Copy success event fired but not actually copied on chrome

[bodymindarts]

I am basically implementing:

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

from the example.
The on success handler is firing correctly but the text from the data-clipboard-text attribute isn't being copied (though the success event says it is). It works on safari as expected.

Interestingly enough if there happens to be text highlighted on the screen it will copy that correctly. Also the button example from the https://clipboardjs.com/ website works as expected so I can only assume its somekind of interplay between react - material-ui (the frontend libraries I am using) and chrome that is preventing this from working.

I am posting here to find out if anyone else has experienced something similar or if someone can give me hints of how to approach debugging this further.

[bodymindarts]

nevermind this was fixed by using the {container: <dom-element>} option as documented on how to handle bootstrap style modals.

[bennycode]

@bodymindarts Can you give a small code example how you solved it?

I am also using Material UI and I tried to do the following:

import {Button} from '@material-ui/core';
const ClipboardJS = require("clipboard");

<Button
  data-clipboard-text="Example text"
  color="inherit"
  variant="contained"
>Default</Button>

But the "Example text" is not copied to my clipboard when I click the "Default" button. 😢

[simplecommerce]

@bennyn Hey did you manage to fix your issue? I noticed in my case regardless of how I did it, it only worked on Edge but not on Chrome.

Update: Instead of using this package, I did it myself, and I noticed that on Chrome, I had to add element.focus() in order for it to copy the text content properly, otherwise it would never copy.

Might be a similar issue happening here because its losing its focus or something.

[fisher-]

@bennyn @simplecommerce using Material-UI components (which changes the focus) on e.g. modals or menus, You should define also container element, on which .focus() will be triggered ():

const clipboard = new Clipboard('.copy-to-clipboard', {
  container: document.getElementById('copy-to-clipboard-menu-item')
});

<MenuItem
  id="copy-to-clipboard-menu-item"
  className="copy-to-clipboard"
  data-clipboard-text="Some text"
  onClick={showCopyConfirmation}
>Copy to clipboard</MenuItem>

[ztoben]

If you're dealing with this issue in a material-ui dialog, you can also solve it by passing the disableEnforceFocus prop to the Dialog component. Then you won't need to set the container configuration.