Clipboard code example in Material 9.0.0 docs does not work on Firefox
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### 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:
```typescript
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
Contributor guide
Research direction
Start with src/cdk/clipboard/clipboard.md around the linked line 43 and compare the asynchronous setTimeout attempts with the inline example in the report. Update the Clipboard documentation example so it works with Firefox, then verify the example on the affected clipboard overview page and in Firefox.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100