Copy text to clipboard not working in bootstrap modal dialog

Question

It works fine when outside the modal dialog, but when trying copy text to clipboard in bootstrap modal dialog then it does not work.

<button class="btn btn-primary-outline" data-toggle="modal" data-target="#dia">Open</button>
<button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="not in modal"><i class="fa fa-clipboard"></i></button>

<div id="test" class="modal fade" id="dia" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">Test</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="in modal">
                        <i class="fa fa-clipboard"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script> 
var clipboard = new Clipboard('.copy',{
            container: document.getElementById('test'),
        });
</script>

This is the sample code for the clipboard function in modal and not in modal. Is there any solution to fix the issue when trying to copy text to clipboard in modal dialog?

Answer 1

refer to this issue

or：

Bootstrap 3

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

Bootstrap 4

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