JS Call From Flow Not Working In A Modal

I have a Flow calling some JS, which performs a copy to clipboard function. The JS works by creating a hidden textarea behind the scenes.

It all works okay in the main part of my design, but the JS fails when called from a modal.

Is there some way I can modify what I am doing to make it work from a modal too?

The code is like this:

<script is="dmx-flow" id="flow_c2c" type="text/dmx-flow">{
  meta: {
    $param: [
      {type: "text", name: "phrase"}
    ]
  },
  exec: {
    steps: [
      {
        run: {action: "{{notification.success($param.phrase+' copied to clipboard')}}"}
      },
      {
        runJS: {
          function: "copyTextToClipboard",
          args: ["{{$param.phrase}}"],
          name: "c2c",
          output: true
        }
      }
    ]
  }
}</script>

<script>
    // https://stackoverflow.com/questions/400212/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);
}
  </script>