Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Internet Explorer locks up using ZeroClipboard on a Bootstrap Modal #159

Closed
eleven41 opened this Issue May 23, 2013 · 18 comments

Comments

Projects
None yet
4 participants
@ghost

ghost commented May 23, 2013

I am attempting to use ZeroClipboard on a Twitter Bootstrap modal dialog.

Using the below HTML markup, when clicking the "Copy" button, Internet Explorer will lockup using 100% CPU.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link type="text/css" rel="stylesheet" href="/Content/bootstrap.min.css" />

    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/ZeroClipboard.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="span12">
            <a class="btn" type="button" href="#Modal1" data-toggle="modal">Show Modal Dialog</a>
        </div>
    </div>

    <div class="modal hide fade" role="dialog" id="Modal1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Copy to Clipboard Modal</h3>
        </div>

        <div class="modal-body">
            <p>
                <!-- Textbox and copy button pair (on modal) -->
                <input type="text" id="Input2" />
                <button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy</button>
            </p>

        </div>

        <div class="modal-footer">
            <p>
                <button class="btn" type="button" data-dismiss="modal">Close</button>
            </p>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {

            ZeroClipboard.setDefaults({
                moviePath: '/Scripts/ZeroClipboard.swf'
            });

            var clip2 = new ZeroClipboard($("#Copy2"));
        });
    </script>

</body>
</html>

I am testing using Internet Explorer 10. I have tried using IE10's dev tools to use IE10 Compatibility View as well as IE9 and IE8 modes. All produce the same results: IE locks up using 100% CPU and the process must be terminated.

Google Chrome is OK. Firefox is OK.

Note: when using the same javascript code but moving the button and input off the modal, Internet Explorer does not lock up. So it appears that the modal is a catalyst for the problem.

@ghost

ghost commented May 23, 2013

Additional information:

  • OS: Windows 8
  • Flash ActiveX version: "Shockwave Flash Object" version 11.7.700.169
  • ZeroClipboard version: 1.1.7 (installed using NuGet)
Owner

JamesMGreene commented May 23, 2013

Might be an issue with the mechanism that Bootstrap uses to display the modal. Thanks for bringing it to our attention!

Owner

JamesMGreene commented Jul 15, 2013

@eleven41 Any chance you could try this again with the latest released beta version? I suspect that merging PR #108 may fix this.

@ghost

ghost commented Jul 15, 2013

Unfortunately, it did not fix the issue.

I downloaded the ZIP of the beta3, copied over ZeroClipboard.min.js, ZeroClipboard.js and ZeroClipboard.swf and reloaded my sample program. I verified that the updated versions were being loaded by IE using the F12 dev tools.

Owner

JamesMGreene commented Jul 15, 2013

@eleven41: How unfortunate. 👎 Thanks for verifying, though!

Owner

JamesMGreene commented Jul 17, 2013

@lingihuang I saw a comment from you on this thread that now appears to be deleted:

I had the same issue, too. The reason locked up IE was because modal would do focus on hidden elements before the modals completely were visible. I tried to fix bootstrap-modal.js and it worked. Hope this would help.

//that.$element.show()
that.$element.show('fast', function () {
    that.enforceFocus()
})

Was this comment deleted by accident, or did you delete it because you determined your proposed workaround didn't work (or something like that)? Please clarify, thanks!

@ghost

ghost commented Jul 17, 2013

I too saw the comment. I tried it, but it did not solve the issue for me.

Owner

JamesMGreene commented Jul 19, 2013

This is essentially the same problem as Issue #179, only in Bootstrap instead of jQuery UI.

Problematic code in "bootstrap-modal":

Owner

JamesMGreene commented Jul 19, 2013

cc: @fat @mdo

Owner

JamesMGreene commented Jul 19, 2013

So my suspicions are that this is only happening in IE because of its ActiveX-based Flash Player rather than the NPAPI plugin Flash Player, and that it handles issues of focusin/focus differently. I'm sadly somewhat doubtful that this can be fixed in ZeroClipboard, as the only ways around this that I'm coming up with are:

  • Insert the ZeroClipboard object into the modal dialog element's ancestry, which isn't possible.
  • Remove the handler function for focusin and replace it with one that has a special check for ZeroClipboard.
Owner

JamesMGreene commented Jul 19, 2013

@eleven41: Can you try this out? It should be called once, after loading Bootstrap but before using the Modal.

Theoretical workaround:

(function($) {
  var proto = $.fn.modal.Constructor.prototype;
  // Aggregious hack
  proto.enforceFocus = function () {
    var that = this;
    $(document).on('focusin.modal', function (e) {
      if (that.$element[0] !== e.target &&
          !that.$element.has(e.target).length &&
          !$(e.target).closest('.global-zeroclipboard-container').length) {
        that.$element.focus();
      }
    });
  };
})(window.jQuery);

@fat @mdo: Is there any better existing way to do this in Bootstrap? If not, I'll file a new issue to discuss future options. LMK, thanks!

@ghost

ghost commented Jul 19, 2013

Good news. It worked for me.

Owner

JamesMGreene commented Jul 19, 2013

Most excellent! 🤘

I'll add some notes to the docs about special focus issues like this one and #179.

@JamesMGreene JamesMGreene was assigned Jul 20, 2013

Owner

JamesMGreene commented Jul 20, 2013

@fat @mdo Filed a Bootstrap issue to discuss: twbs/bootstrap#8537

It worked for me thanks.

@JamesMGreene JamesMGreene was assigned Jan 16, 2014

@fadomire fadomire referenced this issue in mailru/FileAPI Jul 22, 2014

Closed

FileUpload not working in IE9 #100

here is another hack that avoid overriding Bootstrap modal prototype.
solution from @WearyMonkey twbs/bootstrap#5114
$('#global-zeroclipboard-html-bridge').on('focusin', false);

Owner

JamesMGreene commented Jul 22, 2014

@fadomire: Sweet, that is way more straight-forward!

@JamesMGreene JamesMGreene added a commit to JamesMGreene/zeroclipboard that referenced this issue Jul 22, 2014

@JamesMGreene JamesMGreene Docs: Added a simpler workaround for Bootstrap modals
Ref #159.
57e8434
Owner

JamesMGreene commented Jul 22, 2014

I've updated the docs ("instructions.md") to include this workaround. As I haven't verified it myself, I've just added it rather than replacing the old workaround with it.

https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md#workaround-a

@JamesMGreene JamesMGreene added a commit to JamesMGreene/zeroclipboard that referenced this issue Jul 22, 2014

@JamesMGreene JamesMGreene Docs: Fixed a critical typo in the workarounds for modals
Ref #159.
Ref #179.
505fdf2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment