Clipboard: copy method returns false inside observable

[lvimalchandran]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

this.clipBoard.copy('copy text') is not working in Chrome. It always return false when its inside the observable and the response of the observable takes more time. This same scenario works fine when I tested in IE. There are not warnings/error in browser console.

I have also tried with beginCopy/copy/destroy methods but it didnt get copied and no errors in browser console.

There are other places I have used the copy method inside observable and it works fine. The difference in this observable is it returns the observable response faster than the one which doesn't work.

Reproduction

 onSubmitClick() {
    this.statusMessage = 'Processing, please wait...';
          const inputParam = new UIInputVO();
          this.service.generateOutput('inputType', inputParam).subscribe(
            (response: any) => {
              this.statusMessage = response.resultMsg;
              this.txtOutputList = response.txtOutputInfo;
              this.clipBoard.copy(response.windowsPath);
              if (!this.btndisabled) {
                  setTimeout(() => {
                      // this will make the execution after the above boolean has changed
                      this.submitbtn.nativeElement.focus();
                  }, 0);
              }
            }
          );
  }

Expected Behavior

It should copy to user clipboard

Actual Behavior

not copied the string passed to copy method

Environment

• Angular:9.1.12
• CDK/Material:9.2.4
• Browser(s): Chrome - Version 96.0.4664.110 (
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is likely a browser issue, because browsers tend to only allow system actions like adding something to the clipboard, if they're a result of a user action. Since the HTTP request resolves some time after the action, the browser can decide to block it. We can get around it by using the navigator.clipboard.copyText API, but that'll be a breaking change because its result is a Promise.

[lvimalchandran]

Thanks @crisbeto. I have tried using navigator.clipboard.copyText and it works fine in Chrome. but the same is not working in IE. Is there anyway I can use angular way of fixing this issue?

[crisbeto]

You could use navigator.clipboard.copyText if it exists, otherwise fall back to the CDK clipboard service.