zenorocha / clipboard.js

:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:
https://clipboardjs.com
MIT License
33.98k stars 3.98k forks source link

await http response extends 5000 clipboard is fail #819

Closed CatSniper closed 1 year ago

CatSniper commented 2 years ago

I have a http request when respone extends 5000 use clipboard is fail

code is like: awiat new Promise((resolve) => { setTimeout(() => { url = 'url:' + Math.random(); resolve(''); }, 10000); // when time < 5000 it is ok; when time > 5000 it can not copy url }) // make fake element const fakeEl = document.createElement('button'); // setup a new Clipboard.js const clipboard = new Clipboard(fakeEl, { text: () => url, action: () => 'copy', container: document.body, }); clipboard.on('success', (e) => { console.log('clipboard.on(suc', e); clipboard.destroy(); // resolve(e); }); clipboard.on('error', (e) => { console.log('clipboard.on(error', e); clipboard.destroy(); // reject(e); }); // appendToBody fixes IE document.body.appendChild(fakeEl); // simulate click fakeEl.click(); // remove from body if appended document.body.removeChild(fakeEl);

huxianc commented 2 years ago

document.execCommand('copy') return false when time >= 5000ms mdn

huxianc commented 2 years ago

document.execCommand('copy') return false when time >= 5000ms mdn

https://stackoverflow.com/questions/31925944/execcommandcopy-does-not-work-in-ajax-xhr-callback

obetomuniz commented 1 year ago

As per docs, document.execCommand() only returns true if it is invoked as part of user interaction, you should simulate a click to workaround this context after async operations and before copy action.