Clipboard.js won't copy text from modal with negative tabindex value

[Kolpikov]

Minimal example

Fork this github.com/Kolpikov/clipboard.js_negative_tabindex_issue and reproduce your issue.

Expected behaviour

I faced problem while trying to copy text from modal window. Library won't copy any text inside modal that has negative tabindex value. I created a small example in which I reproduce this issue.
First modal form doesn't have tabindex attribue and library works as a charm, but for the second one - I added tabindex="-1" attribue and library faild to copy (but whithout any errors shown).

Hope this will be usefull for you and you will include this issue into your documentation. :)

[tamirchuba]

I have faced exactly with this problem. I am using dialog of blueprintjs which has two wrapper div elements with tabIndex attribute. When I remove these attributes manually clipboard library works.

[zenorocha]

Hey @Kolpikov,

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() {};

If you want to know exactly what you're overriding, check the _enforceFocus function implementation.

Originally reported at #155
Problem reported on twbs #19850
Listed on the Known Issues wiki

[zenorocha]

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

[karinafarina]

@zenorocha , How would I use this in react? It doesn't seem to recognize 'new' and won't work with var.

[justinsane]

Any ideas how to copy text to clipboard in a modal with negative tab index using Bootstrap 5?

[flickervale]

Any ideas how to copy text to clipboard in a modal with negative tab index using Bootstrap 5?

Maybe this can help, I tried to copy clipboard in modal Bootstrap 5 by doing this:

example of element:
<button class="btn btn-outline-secondary btn-sm d-flex align-items-center" onclick="copyClipboard(this)" address="yourTextHere" type="button">

the jquery:

function copyClipboard(target) {
    setTimeout(function () {
        $('#copied_tip').remove();
    }, 800);
    var text = $(target).attr('address');
    navigator.clipboard.writeText(text);
    $(target).append("<div id='copied_tip'>Copied</div>");
};