How to allow async programmatic copy-to-clipboard functionality in FireFox

Question

I have a website that allows users to copy information to their clipboard to make other parts of their job easier. My issue is FireFox not allowing async copy-to-clipboard functionality. I need the async feature as the data shown on the screen is not necessarily the data being copied (as per the client's requirements). So, I make a trip to the server to build up the appropriate info and bring it back to the client. This works in Chrome and IE.

The following both always fail in FireFox

document.execCommand("copy")

Or

navigator.clipboard.writeText(text)

I also tried querying the permission but it tells me the name of the permissions are not recognized:

Either:

navigator.permissions.query({name:'clipboardWrite'})

Or:

navigator.permissions.query({name:'clipboard-write'})

I am aware that extensions/add-ons have additional functionality that can be exposed and accessed but that is not an option for me.

Is there any way to allow web sites to natively request access for the async clipboard functionality in FireFox?

Answer 1

Firefox can run the clipboard commands only when initiated by user interaction. The issue is most likely there.

You can see more about it in the compatibility chart on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

I would highly recommend that you use a library that does away with browser inconsistencies. ClipboardJS is the most popular one https://clipboardjs.com.