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

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]

Thank you. This is precisely the concern I raised on my second comment on this issue. Now that the documentation code example and the CdkCopyToClipboard directive are aligned, this is no longer purely a documentation issue: the directive code itself is in question as well.

I agree with what @crisbeto says - we need to understand why setTimeout was used in the first place. In other words, what’s wrong with the simple for loop in my original comment on this issue?

Can we ask whoever wrote the directive code in the first place? It seems to have been introduced in the following commit, but this was authored by @crisbeto and committed by @mmalerba, so presumably one of you can explain why it was done that way? Am I misunderstanding something here?

https://github.com/angular/components/commit/a67cef6cf048166ebd1934637dbe0136c2dd345c

Appreciate your help!

[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.