angular / angular/components

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

Open
#18,449 10 comments 1 reaction 0 assignees View on GitHub
area: cdk/clipboard area: material.angular.io docs P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.