I have a react file, using a copyText with navigatorClipboard and documentExec command. However in Safari both are not working when the call is wrapped up with asynchronous mode. Here is an example created in codesandbox:
https://codesandbox.io/s/goofy-worker-rypyr?file=/src/App.js
let textArea;
const isOS = () => navigator.userAgent.match(/ipad|iphone/i);
const selectText = (text) => {
textArea = document.createElement("textArea");
textArea.value = text;
document.body.appendChild(textArea);
if (isOS()) {
const range = document.createRange();
range.selectNodeContents(textArea);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
};
const copyToClipboard = () => {
const success = document.execCommand("copy");
console.log(success);
document.body.removeChild(textArea);
};
const copyExecText = (text) => {
selectText(text);
copyToClipboard();
};
const copyNavText = (text) => {
navigator.clipboard.writeText(text).then(
() => {
console.log("Async: Copying to clipboard was successful!");
},
(err) => {
console.error("Async: Could not copy text: ", err);
}
);
};
export { copyExecText, copyNavText };
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const makeCopyText = async () => {
await wait(1000);
copyNavText("Non Sync copy text with Navigator!");
};
const makeCopyTextExec = async () => {
await wait(1000);
copyExecText("Non Sync copy text with exec!");
};<div>
<button onClick={makeCopyTextExec}>Async Copy Exec Text</button>
<button onClick={makeCopyText}>Copy Nav Text</button>
</div>Ideally, I am trying to get the copy context from an API (Async way) and put that in the clipboard. Safari rejects both the function straightaway and I am unable put the content in the Clipboard. However both Chrome and Firefox works fine.
Please let me know is there any way to make the Safari works on Asynchronous mode.