Clipboard code example in Material 9.0.0 docs does not work on Firefox

[amdw]

Documentation Feedback

The following code example from the Clipboard documentation for Angular Material 9.0.0 does not work on Firefox:

https://github.com/angular/components/blame/a67cef6cf048166ebd1934637dbe0136c2dd345c/src/cdk/clipboard/clipboard.md#L43

The problem seems to be that Firefox does not allow Javascript applications to write to the clipboard except synchronously inside a click handler (unless special permissions have been granted):

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#Writing_to_the_clipboard

Therefore, the fact that the attempt function is called asynchronously using setTimeout causes the call to fail, with a console warning message saying the copy was "denied because it was not called from inside a short running user-generated event handler".

It's unclear to me why the example code is written with the copy attempts done asynchronously. Running the attempts inline seems to work fine, even for a fairly substantial amount of data:

let clipboardData = 'something to copy';
const pending = this.clipboard.beginCopy(clipboardData);
for (let attempt = 0; attempt < 3; attempt++) {
  const result = pending.copy();
  if (result) {
    console.log('Copied on attempt ' + (attempt+1));
    break;
  }
}
pending.destroy();

Affected documentation page:
https://material.angular.io/cdk/clipboard/overview

[amdw]

I should also mention that I have not tried the template directives such as cdkCopyToClipboard.

If these are implemented like the code example internally, then they will presumably also not work on Firefox, in which case this would be a code bug rather than just a documentation issue.

[crisbeto]

The example seems to be working for me against Firefox 73.

[amdw]

I created a small application that successfully reproduces the problem on Firefox 72.0.2 (the current version in Fedora 31).

https://github.com/amdw/angular-clipboard-repro

Clicking the first button (which has a click handler that matches the documentation example code) fails to copy any text to the clipboard, and you get a warning message in the JavaScript console:

document.execCommand('cut'/'copy') was denied because it was not called from inside a short running user-generated event handler.

Clicking the button on the right works as expected: the text is copied to the clipboard and there is no warning in the console - just the "Copied on attempt" message, which I've yet to see display any attempt count other than 1.

[amdw]

Firefox 73.0 was just rolled out to Fedora Workstation 31, and I can confirm that the problem is still reproducible using my example app on that version.

[jackwootton]

Looks like this is happening in Mozilla Firefox 73.0.1 (64-bit), Ubuntu 19.10. It was reported by a user of www.jsonschema.net. See jsonsystems/json-schema#68

[crisbeto]

I'm able to reproduce it now as well. The weird thing is that it complains about setTimeout, but not for Promise.resolve().then.