Uncaught TypeError: clipboard.clipboardAction is undefined

[hiren1094]

Hello,

We should check the "undefine" condition in site-health.js for avoiding the below error.

Uncaught TypeError: clipboard.clipboardAction is undefined ( firefox )

OR

Uncaught TypeError: Cannot read properties of undefined (reading 'fakeElem') (chrome)

Line No: 38

It is produce when click on "Copy site info to clipboard"

[hiren1094]

56515.patch

[Clorith]

Hi there, and welcome back to the WordPress trac!

I'm actually more curious about why you are getting this undefined error, which may indicate that the clipboard manager library is not properly set up in your environment; finding the reasoning for that, especially since this relates to an accessibility-related behavior, is more valuable than addressing the symptom I believe (we may still have to address the symptom as well, but it's better to start at the right end :) )

[costdev]

From what I can tell, this was introduced in 6.0. Still trying to track down a commit that might've introduced this.

I get the same issue after clicking the "Copy site info to clipboard" and waiting a number of seconds.

Tested on:

• 🐞 WSL2 (Ubuntu), wordpress-develop:trunk
• 🐞 WSL2 (Ubuntu), fresh install of WP 6.0 (not 6.0.2)
• 🐞 Local by Flywheel (Windows 10).
• 🐞 Occurs in Chrome and Firefox.
• ✅ I tested 5.9 and it doesn't happen there.

[hiren1094]

Tested on:

I have tested on a fresh install of WP 6.0 & 6.0.2.

And I got different errors in Chrome and Firefox.

Uncaught TypeError: clipboard.clipboardAction is undefined ( firefox )
AND
Uncaught TypeError: Cannot read properties of undefined (reading 'fakeElem') (chrome)

And I tested on Windows 11

[costdev]

The errors refer to the same issue: clipboard.clipboardAction is undefined.

In Chrome, it tells you that it cannot read the fakeElem property of clipboard.clipboardAction (which is undefined). Firefox is clearer in that it tells you specifically that clipboard.clipboardAction is undefined.

[afragen]

Tested on Safari (latest)

[Error] TypeError: undefined is not an object (evaluating 'clipboard.clipboardAction.fakeElem')
    (anonymous function) (site-health.js:38)

But it does copy to clipboard.

[costdev]

After some bisecting, it was introduced in [53164] (#55547). Pinging @desrosj as the committer for additional insight.

[Clorith]

Aha, so it requires waiting after, I see, yes I can replicate it then.

The change here is that the clipboard.js library was updated from version 2.0.8 to 2.0.10

The reasoning being that the API changed, the clipboardAction no longer exists (it's been replaced with just action), but more importantly, the removal of the fake DOM element is now handled by the .copy API, so no longer needs to be done by us.

[hiren1094]

Patch Updated

[hiren1094]

Hello @Clorith & @costdev,

I have uploaded updated patch file please verify and share your feedback.

Trac ticket: https://core.trac.wordpress.org/ticket/56515

[costdev]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/3201

Steps to Reproduce or Test

1. Navigate to Tools > Site Health.
2. Click the Info tab.
3. Open Devtools.
4. 🐞 On the page, click the Copy site info to clipboard button and wait.
5. Apply the PR.
6. Run npm run build:dev.
7. Repeat steps 1-4. (You might need to perform a hard refresh before step 4).

Expected Results

When reproducing the issue:

• ❌ The info is copied to the clipboard, but an error also appears in the console. clipboard.clipboardAction is undefined.

When testing the PR:

• ✅ The info is copied to the clipboard and no error appears in the console.

Environment

• Server: Apache (Linux)
• WordPress: 6.1-alpha-53344-src
• Browser: Chrome 105.0.0.0
• OS: Windows 10
• Theme: Twenty Twenty-Two
• Plugins: None activated

Actual Results

When reproducing the issue:

• ❌ The info was copied to the clipboard, but the error appeared in the console. Issue reproduced.

When testing the PR:

• ✅ The info was copied to the clipboard and no error appeared in the console. The PR resolves the issue.

---

@Clorith What do you think?

[Clorith]

In 54089:

Site Health: Fix TypeError when copying debug information.

In [53164] the clipboard.js library was updated to from version 2.0.8 to 2.0.10, and in doing so caused a TypeError JavaScript error to be thrown when the copy button for debug information was used.

With the update, the clipboard.js library introduced an enhancement to its .copy() API, which now removes the fake DOM element used for copying content, which Site Health previously had to remove manually.

As this fake DOM element is now removed automatically, the copy function within the debug information screen can rely on the library performing the removal, instead of WordPress needing to do so manually.

Props hiren1094, costdev.
Fixes #56515.

Implemented in ​563e24c

[costdev]

Hi @Clorith just a quick check - is there anything left to do for this ticket or is it ready to close?

[Clorith]

Nothing more to do here @costdev, and the ticket is implemented and closed already :)

I did just update the milestone, as there's no actual broken functionality, just a JavaScript warning, so I'm not going to target this for any potential minor release.

[costdev]

Thanks @Clorith! 👍 (and yes, just seeing that it was already closed 😅)