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

Question

I have a button on a bootstrap modal which is supposed to copy some data (shown in the modal) to clipboard (with clipboard.js).

Modal seems to not support this action.

When the button, which triggers the event described above, is out of the modal it works like a charm! So, i decided to make the modal button trigger another hidden button outside of the modal so the action could be done. But it still does not work! Please help, code and example below.

https://jsfiddle.net/w6rL9sqz/2/

js

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/clipboard.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
    $( document ).ready(function() 
    {

        //tooltip
        $('.trigger-button').tooltip({
            trigger : 'click'
        });

        $('.trigger-button').click(function()
        {
            $('.trigger-button').tooltip('show');
            setTimeout(function()
            { 
                $('.trigger-button').tooltip('hide'); 
            }, 
            2000);  
            $('#copy-button').trigger('click');
        });

        // copy to clipboard
        var yii2_ids = 1234567890;
        $('#copy-button').click(function(){
            var clipboard = new Clipboard('#copy-button', {
                text: function() 
                {
                    return yii2_ids;
                }
            });
            clipboard.on('success', function(e) {
                console.log(e);
            });
        });
    });
</script>

html

<div class="container-fluid margin-top">
<div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 search-div">
        <div class="row">
            <center>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                <button id="copy-button" class="btn btn-primary" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard" style="display:none;">triggered-hidden</button>
                <button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard">Copy to Clipboard</button>
                <textarea></textarea>
            </div>
            </center>
        </div>
        <br />
        <button class="btn btn-primary" data-target="#upload-ebook" data-toggle="modal" type="button">Modal</button>
        <div class="modal fade bs-example-modal-lg"  id="upload-ebook" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <p style="text-align:left; background: black; color: white; padiing: 20px;">
                            <samp><b>id = $id</b></samp><br>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard">Copy to Clipboard</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

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

Answer 2

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

Answer 3

First of all, you are creating a yii2_ids variable;

var yii2_ids = 1234567890;

And returning it as it is, without overriding;

var yii2_ids = 1234567890;
$('#copy-button').click(function(){
    var clipboard = new Clipboard('#copy-button', {
        text: function() 
        {
            return yii2_ids;
        }
    });

You need to get what is written in modal with jQuery and return it in this function. I made a working example for you in this jsFiddle.

EDIT: If code still don't work on Firefox but works in other browsers, it may be a Firefox caching issue which you can solve by a full refresh (CTRL + F5).