angular / angular/components

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

Ouverte
#18,449 10 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: cdk/clipboard area: material.angular.io docs P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par src/cdk/clipboard/clipboard.md autour de la ligne 43 indiquée par le lien et comparez les tentatives asynchrones avec setTimeout à l’exemple inline du rapport. Mettez à jour l’exemple de la documentation de Clipboard afin qu’il fonctionne avec Firefox, puis vérifiez l’exemple sur la page de présentation de Clipboard concernée et dans Firefox.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
documentation
Type d'issue
Documentation
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.