"Copy to Clipboard" icon does not work inside a bootstrap modal container

[MrLeebo]

I built a repro using https://esnextb.in/ but it seems that the site's Save function is currently broken.

Repro: https://gist.github.com/MrLeebo/84a3059a7a33993c34567172ec77698f

1. Go to https://esnextb.in/
2. Copy the "code.js" file into the Code tab
3. Copy the "index.html" file into the HTML tab
4. Package tab should auto-populate but you can check it with the "package.json" file
5. Click the "Copy to clipboard" icon. Clipboard does not change
6. If you remove the Modal and simply render the JsonView like normal, the icon works correctly and the clipboard contains the JSON contents

[mac-s-g]

thanks for reporting the issue!

I'll try to replicate as soon as I have a chance.

[mac-s-g]

@MrLeebo would you mind testing with react-json-view@1.14.0? the clipboard code changed a bit and i'm wondering if it impacted this issue.

[MrLeebo]

@mac-s-g Thanks, but it doesn't seem to have made a difference.

[stephenshank]

@mac-s-g Thanks for such an awesome project! I am experiencing the same issue. Happy to help if possible.

[mac-s-g]

updating title because I was able to use copy-to-clipboard when using a semantic-ui modal rather than bootstrap. I'll dig in to bootstrap a bit.

[mac-s-g]

also verified that the issue does occur when using a react-bootstrap modal at version 0.31.5

[mac-s-g]

relevant threads:

1. https://stackoverflow.com/questions/38398070/bootstrap-modal-does-not-work-with-clipboard-js-on-firefox
2. https://stackoverflow.com/questions/46107274/copy-text-to-clipboard-not-working-in-bootstrap-modal-dialog

here is the only solution I can find:
zenorocha/clipboard.js#155 (comment)

I hope that helps. I'm closing this issue because I don't think the problem is caused by RJV source. It's a documented issue with bootstrap modals.

[vaclav-purchart]

I've found similar issue when using json-react-view using @material-ui. However there is a simple workaround (at least for Chrome):

	handleCopy = (copy) => {
		navigator.clipboard.writeText(JSON.stringify(copy.src, null, '\t'))
	}

...

	<ReactJsonView enableClipboard={this.handleCopy}>

[KilianB]

I've found similar issue when using json-react-view using @material-ui. However there is a simple workaround (at least for Chrome):

	handleCopy = (copy) => {
		navigator.clipboard.writeText(JSON.stringify(copy.src, null, '\t'))
	}

...
	<ReactJsonView enableClipboard={this.handleCopy}>

Inside a Mui model adding disableEnforceFocus resolved the issue for me.

<Modal disableEnforceFocus>