Clipboard.js: Copy does not work for IE11 and FF 43.01 when used within bootstrap modal dialog

[Rookian]

When I try to use clipboard.js within a bootstrap modal dialog the copy functionality does not work.
Whereas it works nice outside the modal dialog.

Only Chrome 47 has no problems.

Take a look at: https://jsfiddle.net/bnxhc087/3/

[chrishein]

I'm seeing the same issue with IE9, but only when copying text from another element.
If I copy text from attribute it does work within a bootstrap modal.

This works in modal:

<button class="btn" data-clipboard-text="Value to copy">
    Copy to clipboard
</button>

[zenorocha]

There seems to be a incompatibility with event delegation. Try passing the nodes instead of a selector.

• https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html
• https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html

[fain182]

Maybe we should add it to README or Known Issues ?

[zenorocha]

Or fix it? ;)

[fain182]

It would be even better :-) so we want to reopen the issue until this is fixed?

[fain182]

https://jsfiddle.net/03884gc9/3/
The problem in Firefox 43 remains even passing the nodes instead of a selector.

[Rookian]

In Firefox 39 it is also not working.

[ykiran]

Hi,
there is a way around this issue, but for that you've to hide/close the modal just before you copy the text.
Only when you do that, the text is copied.
I've tried this. Here is what I did:

There are two buttons: one in the modal and the other hidden, inside the form or another div.

• The hidden button will be bound to the actual clipboard events.
• The one in the modal will just trigger the click event of the hidden button.

When the modal button is clicked, the modal is hidden and the other button's click event is triggered.

Here is the jsfiddle link
https://jsfiddle.net/03884gc9/5/

Tested this on Firefox 43.0.4

However we would like a solution where we don't need to close the modal dialog

[MojoDK]

Any news on this issue? All "solutions" above doesn't when I try them.

[zenorocha]

Still no idea why this is happening. If you find a solution, feel free to send a PR.

Added to Known Limitations wiki page

[chosenvictim]

Any update on this issue ? I am also facing the same problem.
I am dynamically setting the text using this function:-

new Clipboard('.btn', { text: function() { return "copy-text"; } });

It doesn't work when i use it inside bootstrap modal + firefox(v45) & safari(v8), but works fine on chrome and IE11.

[magicmarkker]

I've tried a combination of everything in this thread so far and nothing has worked. ZeroClipboard also had a similar issue with the modal stealing focus from the flash element. they fixed it by setting the modals .on('focusin', false); and i've tried that also with no luck.

[zenorocha]

Ok, I finally found a solution 🙏 🙏 🙏 🙏 🙏

Bootstrap's modal enforce focus for accessibility reasons but that causes problems with LOTS of third-party libraries, including clipboard.js.

https://github.com/select2/select2/issues?q=is%3Aissue+bootstrap+modal+is%3Aclosed
https://github.com/zeroclipboard/zeroclipboard/issues?q=is%3Aissue+bootstrap+modal+is%3Aclosed
https://github.com/twbs/bootstrap/issues?q=is%3Aissue+enforceFocus+is%3Aclosed

You can turn off this functionality by doing...

Bootstrap 3

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

If you want to know exactly what you're overriding, check Bootstrap's source code at: https://github.com/twbs/bootstrap/blob/10606a73bcbfc6c723d60e2a1069c921afff0d2a/js/modal.js#L139-L149

[zenorocha]

Just opened an issue on Bootstrap: https://github.com/twbs/bootstrap/issues/19850

[meloniq]

I have had similar issue with Colorbox library when the 'copy' button was inside of the modal window - it was fixed by adding param to Colorbox trapFocus: false (note added just for future googlers)

[alexalexalex-s]

Removing functionality from another library to fix the issue is stupid. A much simpler fix is to add a container option to the constructor of clipboardjs, which defaults to document.body, but allows you to pass in a reference to your modal. The copy only fails in a modal because the dummy element created to copy the text is outside of the modal.

See the fix here, which leaves Bootstrap's code alone.

new Clipboard("button-selector", { container: yourModalHtmlElement });

[nik-k]

I'm using bootstrap + magnific popup.
The issue is still there for me. It works well in IE + Edge, but not in Ffox 51.0.1 (32-Bit).

[zenorocha]

You can now set a new focus option to false, so enforceFocus isn't called.

http://v4-alpha.getbootstrap.com/components/modal/#options
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/modal.js#L251

[phardye]

thanks a lot! I got it.

[toolaugh]

@alexalexalex-s how to pass the container reference ? with bootstrap modal.
const clipboard = new ClipBoard('.btnCopy', { text: () => this.props.value, container: ??? });

[alexalexalex-s]

When creating your Clipboard object, set the 'container' property in the
options object to your modal element (usually a div). Like so...

new Clipboard('.btn', {
container: document.getElementById('modal')
});

On 30 August 2017 at 06:37, toolaugh [e-mail] wrote:

@alexalexalex-s https://github.com/alexalexalex-s how to pass the
container reference ? with bootstrap modal.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/zenorocha/clipboard.js/issues/155#issuecomment-325878225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUKTfPZN8LoeTNs82_hhk57LNCRuuwu8ks5sdOb5gaJpZM4G5Zno
.

[toolaugh]

oki, It works well

[ty2610]

I'm still having this issue, and switching to bootstrap 4 isn't an option. Is there a way of making this work in a modal while using:

clipboard.copy({
"text/html": $scope.script
})

I click the button and it calls a function, which this portion of code lives. There's more logic that goes on in this function, so I need the copying to happen when the function is called.