Make WordPress Core

Opened 22 months ago

Closed 22 months ago

Last modified 7 months ago

#56515 closed defect (bug) (fixed)

Uncaught TypeError: clipboard.clipboardAction is undefined

Reported by: hiren1094's profile hiren1094 Owned by: clorith's profile Clorith
Milestone: 6.1 Priority: normal
Severity: normal Version: 6.0
Component: Site Health Keywords: has-patch has-testing-info
Focuses: javascript Cc:

Description

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"

Attachments (2)

56515.patch (898 bytes) - added by hiren1094 22 months ago.
56515.patch
56515.2.patch (830 bytes) - added by hiren1094 22 months ago.
Patch Updated

Download all attachments as: .zip

Change History (18)

@hiren1094
22 months ago

56515.patch

#1 @hiren1094
22 months ago

  • Keywords has-patch added; needs-patch removed

#2 @Clorith
22 months ago

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 :) )

#3 @costdev
22 months ago

  • Version changed from 6.0.2 to 6.0

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).
  • I tested 5.9 and it doesn't happen there.

Tested in Chrome and Firefox.

Version 2, edited 22 months ago by costdev (previous) (next) (diff)

#4 @hiren1094
22 months ago

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

#5 @costdev
22 months ago

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.

#6 @afragen
22 months ago

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.

Last edited 22 months ago by afragen (previous) (diff)

#7 @costdev
22 months ago

  • Milestone changed from Awaiting Review to 6.0.3
  • Type changed from enhancement to defect (bug)

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

Last edited 22 months ago by costdev (previous) (diff)

#8 @Clorith
22 months ago

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
22 months ago

Patch Updated

#9 @hiren1094
22 months ago

Hello @Clorith & @costdev,

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

#11 @costdev
22 months ago

  • Keywords has-testing-info added

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?

#12 @Clorith
22 months ago

  • Owner set to Clorith
  • Resolution set to fixed
  • Status changed from new to closed

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.

Clorith commented on PR #3201:


22 months ago
#13

Implemented in 563e24c

#14 @costdev
22 months ago

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

#15 @Clorith
21 months ago

  • Milestone changed from 6.0.3 to 6.1

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.

#16 @costdev
21 months ago

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

Note: See TracTickets for help on using tickets.