angular / angular/components

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

未关闭
#18,449 10 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/clipboard area: material.angular.io docs P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### 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

贡献指南

打开贡献指南

调研方向

从链接所指的第 43 行附近的 src/cdk/clipboard/clipboard.md 开始,将异步的 setTimeout 尝试与报告中的内联示例进行比较。更新 Clipboard 文档示例,使其能够在 Firefox 中运行,然后在受影响的 Clipboard 概览页面和 Firefox 中验证该示例。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
documentation
Issue 类型
文档
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。