Clipboard.js: data-clipboard-text is not being copied in Chrome 55

[eximius313]

Minimal example

I have a link:

<a id="copy-button" class="btn" data-clipboard-text="test">
      <i class="icon-chain"></i><span>copy me</span>
</a>
<script>
copyToClipboard('copy-button');
</script>

and JS:

function copyToClipboard(copyButtonId){
    var clipboard = new Clipboard('#'+copyButtonId);
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    });
}

When I click the link, console prints:

Action: copy
Text: test
Trigger: <a id=​"copy-button" class=​"btn" data-clipboard-text=​"test">​…​</a>​

Expected behaviour

Content test should be inside clipboard

Actual behaviour

clipboard has previously copied value

Browsers affected

Chrome 55.0.2883.87
Firefox 51.0.1

[zenorocha]

Clipboard.js is working fine. The problem is how you're using JavaScript.

In this line:

copyToClipboard(copy-button)

You forgot to add the quotes.

copyToClipboard('copy-button')

If you still have a problem, please share a JSFiddle.

[eximius313]

@zenorocha
Of course I'm using quotes.
Look what console prints in my example. It wouldn't work otherwise...
Could you please reopen it?

[holgersindbaek]

I'm experiencing the same on the newest version of Chrome and the newest version of this library. @eximius313 Any resolution on this?

[zenorocha]

https://clipboardjs.com/ uses data-clipboard-text and everything seems to be working fine.

Can you share a JSFiddle that reproduces this problem?

[eximius313]

I discovered that it has something to do with modal window because if the button is on the window's "parent" page - copying works fine. If it is inside the window - it doen't work.
Unfortunatelly I didn't have the problem solved yet

[zenorocha]

Check the new container option introduced by #368 on v1.7.0

[eximius313]

It works! Thank you

[zenorocha]

;D