Issue with copying from within modal

[kahboom]

I'm using angular-clipboard in several different places (it's great btw), but have recently run into an issue where the text is not copying from within a modal. I did a basic test on Plunkr with a modal which seems to be working fine, so there must be something else causing this.

Working Plunkr: http://plnkr.co/GdY5y2sm688RvwnzGGgg

For the code that doesn't work:

• Here is the function that appends the modal directive to the body: https://github.com/kahboom/apiman/blob/752-753-copy-improvements/manager/ui/hawtio/plugins/api-manager/ts/app/app-apis.ts#L19
• The modal directive is in the same file as above, just scroll all the way down.
• The HTML that references the copy-to-clipboard directive from within the modal: https://github.com/kahboom/apiman/blob/752-753-copy-improvements/manager/ui/hawtio/plugins/api-manager/html/app/apiModal.html#L24

Adding a console.log(); to the angular-clipboard directive shows that the correct text is 'captured' in the createNode and copyText functions.

This is a working example within the same project (not within a modal): https://github.com/kahboom/apiman/blob/752-753-copy-improvements/manager/ui/hawtio/plugins/api-manager/html/app/app-apis.html#L72

Btw this is on OSX El Capitan & Chrome. I'd appreciate any feedback or input. Thanks in advance!

[omichelsen]

Hmm, without a broken example I can't really guess at what's going wrong for you. The angular-clipboard directive has it's own scope, so the inner functions should be "safe" from whatever you are doing in the outer scope of the modal.

The directive is listening for the 'click' event, so a guess might be that you are loading another listener for this even which calls preventDefault() or stopPropagation()?

[theroymind]

@kahboom did you ever find a solution to this? I have the same issue using angular material trying to use the clipboard directive within a modal.

[kahboom]

@omichelsen @theroymind - Sorry for the delayed response. I made a Plunker to demonstrate it not working within a modal: http://plnkr.co/edit/EuCEafaRz5i4TOjrD1bP?p=preview

If I get a chance, I'll test out a few things later today.

[kahboom]

@omichelsen @theroymind - FWIW, it seems to work without issues within a UI-Bootstrap modal, if that helps: http://plnkr.co/edit/ZStcrX79S8t0oD4w9Uhs?p=preview

[theroymind]

@kahboom thanks for taking the time to make these, I appreciate the follow up! perhaps this is some sort of scope issue within dynamic compilation? it's very difficult to pinpoint what's happening, the node is being created properly, the selection objects are exactly the same and the exeCommand seems to be returning true. @omichelsen any thoughts?

[omichelsen]

Thanks for the examples. I tried changing some code, but I can't see any reason why it don't work in the custom modal. I do have to click twice to open the custom modal though, so maybe there is another bug in there affecting this?

[felixschul]

+1 Not working inside ngDialog.

[gustavolira]

+1

[paulb2011]

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

http://stackoverflow.com/questions/38398070/bootstrap-modal-does-not-work-with-clipboard-js-on-firefox