ReactJs 中的复制到剪贴板不适用于弹出窗口/模态

Question

I am trying to copy a text for a button click event present in a popup window and the text is not getting copied. I tried with this code which works well on a regular window but not for a popup. Here is the code:

handleClipBoard = () => {           
  var textField = document.createElement('textarea');            
  textField.value = 'text to be copied';         
  document.body.appendChild(textField);         
  textField.select();         
  textField.focus();  // i tried adding focus, It didn't work         
  document.execCommand('copy');             
  textField.remove(textField);          
}        

On reading few posts, I found that document.execCommand('copy') will not work for popup because of focus issues. Is there any alternate to this command in ReactJs, or maybe how to get the focus?

Thank you.

Answer 1

There's a work-around.

Instead of appending the new input to the body element, you can append it to your modal's element, or some other container inside that modal.

So it should work with something like this:

const copyToClipboard = (textToCopy, containerElement = document.body) => {           
  const textField = document.createElement('textarea');            
  textField.value = textToCopy;
  containerElement.appendChild(textField);      
  textField.select();         
  document.execCommand('copy');             
  containerElement.removeChild(textField);          
}        

Answer 2

If you're using something like react-bootstrap with enforceFocus functionality, you're adding the element outside of the Modal and the focus is forced upon the modal.

If you don't need this functionality, you can add enforceFocus={false} to your modal construction. This allows you to target elements outside the modal and do things, like in this case, copy them.

Example:

<Modal show={props.show} onHide={props.close} dialogClassName="modal-lg"
    style={MODAL_STYLES} enforceFocus={false}>
  <Modal.Header closeButton>Example</Modal.Header>
  <Modal.Body>
    copyToClipboard("test");
  </Modal.Body>
</Modal>

Without enforceFocus set to false , I wouldn't be able to copy the "test" string.