copyFromContent not working with longer delay

[sanyooh]

description

I want to copy text to the clipboard which comes from a delayed backend response. Now I tried many different ways to get the text into the clipboard but the command 'execCommand('copy') is not working in the ClipboardService. So I tried the basic functionality and everythings works fine. Then I added delays and when the delay is '2000' it is not able to set text into the clipboard anymore.

Now this hinders my implementation of a feature in our application.

AC

• the method 'copyFromContent' works when fired after a longer delay

code example

I created a plunker with the basis of the given demo. Please follow this link: https://plnkr.co/edit/PPbwSkngc2QQzCHhNDZg?p=preview

[maxisam]

I can't figure this one out. :(

[indywill]

I wonder if this is a limitation of the clipboard service, where the "authorization" from the user (the click) has a time limit.
As a work around, one way to solve could be to have 1 button to "prepare" the clipboard content, and a second to perform the actual copy.

[daradermody]

This fleshes out the problem with execCommand a little more.

I'm also seeing an issue when using the ClipboardService from within a promise where it isn't copying at all regardless of delay. This might be due to some security issues with it being a different thread to the click handler or something (see here).

[ovidiua2003]

Subscribing to this. After an http request to an API, the clipboard doesn't work anymore. I figured it wont work normally but neither with the clipboard service?

[philip-firstorder]

Indeed this is a bug, as the main reason to use the copyFromContent function is exactly to handle delays like this

    this.apiService.getURL().subscribe(
      (response: any) => {
        const ret = this.clipboardService.copyFromContent(response);
        console.log(ret); // returns false, nothing is copied
      },

[v-srsi]

I also noticed that

if (container === void 0) { container = this.window.document.body; }
 // check if the temp textarea is still belong the current container.
// In case we have multiple places using ngx-clipboard, one is in a modal using container but the other one is not.
if (this.tempTextArea && !container.contains(this.tempTextArea)) {
    this.destroy(this.tempTextArea.parentElement);
}

throws an error => "container.contains is not a function"

here the container is "body" (string primitive type).

html:

<i class="fa fa-exclamation-circle" style="color:#f1070c;cursor:pointer" aria-hidden="true"
     *ngIf="Status === 'Failed'"
      container="body" placement="right"
      tooltip="Failed to complete. Click icon to copy exception to clipboard"
      ngxClipboard [cbContent]="CompletionMessage"></i>

Am I missing something?

[surajpoddar16]

Container expects a Dom node rather than a string.