Bug 244812 – navigator.clipboard.write() rejects with NotAllowedError after an async call

• Component: DOM
• Status: RESOLVED DUPLICATE

[Christian Liebel]

I'm using the Async Clipboard API (roughly) like this:

button.addEventListener('click', async () => {
  const blob = await getBlobFromSelection(context, selection);
  await navigator.clipboard.write([new ClipboardItem({
    [blob.type]: blob
  })]);
};

When the user clicks the button, the blob to copy is asynchronously resolved. (In my particular scenario, the selected part of an image gets cropped and converted to PNG.)

Expected behavior:

The blob's content should be copied to the clipboard.

Actual behavior:

The call to navigator.clipboard.write() is rejected with the following error message: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Context:

I suspect this is related to the user gesture policy. After the asynchronous call, the call to the write() method is not seen as part of a user gesture anymore. If I omit the asynchronous call, everything works as expected. I think this scenario should be supported because certain asynchronous operations (like preprocessing images) are sometimes necessary. It's working fine in Blink.

Steps to reproduce:
- Open https://paint.js.org
- Click Edit > Select All
- Click Edit > Copy
- The error mentioned above is logged to the console. The user's drawing is not written to the clipboard.

[Alexey Proskuryakov]

Duplicate of bug 222262?

[Alexey Proskuryakov]

Actually, I'm fairly certain that it is.

*** This bug has been marked as a duplicate of bug 222262 ***