Clipboard code example in Material 9.0.0 docs does not work on Firefox
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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
Beitragsleitfaden
Rechercherichtung
Beginne mit src/cdk/clipboard/clipboard.md rund um die verlinkte Zeile 43 und vergleiche die asynchronen setTimeout-Versuche mit dem Inline-Beispiel im Bericht. Aktualisiere das Beispiel in der Clipboard-Dokumentation, sodass es mit Firefox funktioniert, und überprüfe das Beispiel anschließend auf der betroffenen Clipboard-Übersichtsseite und in Firefox.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 45/100