Handle missing "navigator.clipboard"

[dm-xai]

In some cases navigator.clipboard can be undefined. For example on HTTP site (happens in DMZ environments).

In such cases copy will fail. However, it can always be remediated on user side by using good old execCommand.

This commit modifies code to avoid exception on copy.

[CarlosNZ]

Thanks for this. I wonder if you know an easy way to create an environment where navigator.clipboard is not defined?

[dm-xai]

You can create a record in /etc/hosts (mac, linux) to point to your localhost and then open it with port and HTTP. I think windows has something similar.

[CarlosNZ]

You can create a record in /etc/hosts (mac, linux) to point to your localhost and then open it with port and HTTP. I think windows has something similar.

Okay, thanks. I managed to test it out and I can reproduce the issue and see your solution! I wonder though -- with your solution, I still get the enableClipboard function running even though the navigator.clipboard is skipped, so it looks as though the clipboard has copied even though it hasn't. I wonder if we should prevent that? Or were you suggesting that you can use execCommand within the enableClipboard function to get this functionality back?

If so, what function are you using?

[dm-xai]

yeah, my solution is to run copy code inside enableClipboard
but it may be good idea to move it inside your library

export default function copyToClipboard(value: string) {
  const textArea = document.createElement('textarea');
  textArea.value = value;
  // Avoid scrolling to bottom
  textArea.style.position = 'fixed';
  textArea.style.opacity = '0';
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

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

  document.body.removeChild(textArea);
}

[CarlosNZ]

yeah, my solution is to run copy code inside enableClipboard
but it may be good idea to move it inside your library

Thanks for the info. Apparently the execCommand is considered deprecated , and I don't love the extra boilerplate of creating a "textarea" in order to copy it, so probably won't include that natively.

I'll merge your PR though and I'll start a new issue to:

• check if navigator?.clipboard.writeText() is successful
• include the success/failure as an additional input property for the enableClipboard function, so you can handle it yourself if it fails.

Appreciate the contribution!

[CarlosNZ]

Hi @dm-xai -- this is now released in v1.22.0, along with some additional error handling I did in #162

Thanks again for your contribution 👍