javascript - Copy to clipboard using textarea and document.execCommand('copy) is a problem when MUI popovers are open

Question

An MUI Menu (PopOver) is open with a MenuItem for 'Copy to Clipboard' Option. The MenuItem has an <IconButton>. The onClick handler for the IconButton invokes document.execCommand('copy').

The code for CopyToClipBoard is as follows Ref: How do I copy to the clipboard in JavaScript?

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}

question from:https://stackoverflow.com/questions/65837788/copy-to-clipboard-using-textarea-and-document-execcommandcopy-is-a-problem-wh

Answer 1

Waitting for answers