CopyButton component not copying text to the clipboard if rendered inside a modal dialog element

[nickonometry]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I am rendering CodeBlocks within an HTML dialog. The problem is that the copy button is not actually copying the code snippets to the clipboard. The code strings are being passed down into the copy button properly, but the issue occurs when a <textarea> is rendered dynamically via the copy-text-to-clipboard module. Since the page behind the dialog is inert, and the textarea is appended to the body, it can't copy the text successfully.

Screenshot of my app:

Reproducible demo

https://codesandbox.io/p/devbox/frosty-hodgkin-7p6wwf

Steps to reproduce

1. Test the copy to clipboard functionality on the codeblock that is on the homepage of the reproducible demo, confirm it works fine.
2. Click the open dialog button and click the copy to clipboard button from within the dialog. It doesn't copy anything

Expected behavior

I would expect it to copy just fine from within a dialog. I ended up swizzling the code block component and modified the copy function on line 13 of the CopyButton/index.js to:

navigator.clipboard.writeText(code);

That resolves it. I would love for this to be fixed as we like to use things out of the box and keep swizzling to a minimum.

Actual behavior

As described above. The issue is that the CodeBlock component does not work proeprly when rendered in a dialog that's opened with the showModal function. This occurs because the native dialog applies inert to the page, and the current copy to clipboard function in the CopyButton component appends a textarea element to the dom, since the page is inert, accessing the textarea value doesn't work properly

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[anuplohar001]

just replace .showModal() (index.js : line 10) with .show() it will copy the text which is within the dialog box

[slorber]

I see thanks

I don't think calling show() is a good option, people may want to use a modal on purpose and have the page behind being inert.

Looks like the bug has been reported to our dependency library: sudodoki/copy-to-clipboard#137

We'll probably want to remove that unmaintained library and try provide our own better implementation, inspired from what they did here: PeculiarVentures/peculiar-ui#144