Discontiguous selection is not supported.

[moroshko]

When I use <div> rather than <button> inside <CopyToClipboard>, I get a warning in the console, and nothing is copied to the clipboard.

<CopyToClipboard text={'hey'}>
  <div>Copy to clibpoard</div>
</CopyToClipboard>

Discontiguous selection is not supported.

Codepen

Any idea why is this happening?

[nkbt]

Copy to clipboard has some limited browser support with fallback for other browsers. But this is something different and interesting. I'll have a look tomorrow, it's midnight here already.

[nkbt]

Hm, that seems like a known issue: sudodoki/copy-to-clipboard#2

I tested with span, button, div and other tags. It seems like using something other then button gives this error. Also I can avoid the issue by using onMouseDown rather then onClick. But then it becomes even more interesting, I get error The given range and the current selection belong to two different document fragments.

Comes from https://chromium.googlesource.com/chromium/blink.git/+/master/Source/core/editing/DOMSelection.cpp

As a possible solution I can lock component to render button passing all props to it so it is possible to style it.