Bootstrap modal does not work with Clipboard.js (on Firefox)

I think your question is related to this Clipboard issue, which says that:

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

You can turn off this functionality by doing...

Bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; Bootstrap 4 $.fn.modal.Constructor.prototype._enforceFocus = function() {};

Setting Bootstrap's enforceFocus function to empty is a stupid way of fixing this issue. Removing code from another library shouldn't be your go to option when there are other ways to fix it.

The only reason the copy doesn't work in a Bootstrap modal is because the dummy element created to copy the text is appended to the body, outside of the modal, which as we know enforces focus to it, or its children. So to fix it, we just need to add a container option to clipboardjs to which we can pass a reference to our modal div. That way the dummy element will be appended within the scope of focus and will be able to itself receive focus to copy the text.

Here is the fixed code that doesn't touch Bootstrap's enforceFocus: https://jsfiddle.net/uornrwwx/

When you have a copy button inside a modal, pass it a reference to the modal:

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