Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#52086 closed defect (bug) (fixed)

user-profile.min.js issue on Firefox

Reported by: adi64bit's profile adi64bit Owned by: peterwilsoncc's profile peterwilsoncc
Milestone: 6.0 Priority: normal
Severity: critical Version: 5.6
Component: Users Keywords: needs-patch
Focuses: javascript, administration Cc:

Description

Hi Guys,

We found an issue no WordPress 5.6 when creating a new user on the firefox but on other browser it's normal.

-. can't click on the "hide/show" password button
-. can't click on the "generated password" button
-. can't create a user when the password are manually type (i think because #pass2 element doesn't fill the same value with #pass1 element because of JS error)

jQuery.Deferred exception: o is undefined w@http://localhost/wp-admin/js/user-profile.min.js?ver=5.6:2:180
m@http://localhost/wp-admin/js/user-profile.min.js?ver=5.6:2:935
@http://localhost/wp-admin/js/user-profile.min.js?ver=5.6:2:4841
e@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30005
l/</t<@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30307
setTimeout handler*l/<@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30516
c@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:28294
fireWith@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:29039
fire@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:29075
c@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:28294
fireWith@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:29039
ready@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:32012
B@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:31791
EventListener.handleEvent*@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:32160
@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:220
@http://localhost/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:225
Uncaught TypeError: o is undefined
    w user-profile.min.js:16
    m user-profile.min.js:35
    <anonymous> user-profile.min.js:166
    jQuery 13
        e
        t
        setTimeout handler*l/<
        c
        fireWith
        fire
        c
        fireWith
        ready
        B
        EventListener.handleEvent*
        <anonymous>
        <anonymous>

Attachments (2)

52086.diff (513 bytes) - added by thomasplevy 3 years ago.
2021-09-09_15-28-37.png (3.8 KB) - added by kubiq 3 years ago.
Window 10.0.19043.1165 + Firefox 92.0

Download all attachments as: .zip

Change History (43)

#1 @adi64bit
3 years ago

it can be fixed by adding

$toggleButton = $pass1Row.find('.wp-hide-pw');

right after

 $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );

on user-profile.js::98

#2 @SergeyBiryukov
3 years ago

  • Milestone changed from Awaiting Review to 5.6.1

#3 @SergeyBiryukov
3 years ago

#52096 was marked as a duplicate.

#4 @brookedot
3 years ago

This bug is preventing users from being added as well. I'm getting the error:

Error: Passwords don’t match. Please enter the same password in both password fields.

Of course, there's only one password field but sounds like the underlying issue is the same. I was able to add a new user in Chromium just fine but not Firefox. Both on Ubuntu 20.10 can't seem to replicate on Firefox 84 on macOS 11.

Last edited 3 years ago by brookedot (previous) (diff)

#5 @poena
3 years ago

I have not been able to reproduce these problems with WordPress 5.6 and Firefox version 84 on Windows 10.
Tested both adding new users and editing passwords for existing users.

#6 follow-up: @cbigler
3 years ago

Same problem here ... Firefox 84 doesn't work, but Chrome does (Win 10). I tried the edit on user-profile.js mentioned in post https://core.trac.wordpress.org/ticket/52086#comment:1 from @adi64bit ... still doesn't work.

#7 in reply to: ↑ 6 @cbigler
3 years ago

Replying to cbigler:

Same problem here ... Firefox 84 doesn't work, but Chrome does (Win 10). I tried the edit on user-profile.js mentioned in post https://core.trac.wordpress.org/ticket/52086#comment:1 from @adi64bit ... still doesn't work.

For me, the issue is resolved by deactivating a plugin named Smart Sections at https://codecanyon.net/item/smart-sections-wpbakery-page-builder-formerly-visual-composer-addon/21641422 which I use extensively ... I'll alert them to this.

Last edited 3 years ago by cbigler (previous) (diff)

#8 @cbigler
3 years ago

Update for my particular issue / environment ...

Issues surrounding this involved jQuery Manager plugin not just Smart Sections, so playing with the settings alleviated the problem with Firefox.

In particular, a Smart Sections plugin update helped, and I wasn't running jQuery Migrate, so I enabled that.

#9 follow-up: @brookedot
3 years ago

I think the next step here is to see if we can get steps to reproduce the problem with as vanilla of setup as possible. For example, with just core plugin and themes. I've seen this happen twice now across sites but never been able to narrow down the root cause. Once we have a way to reproduce we can take a look into a fix for 5.6.1.

#10 in reply to: ↑ 9 @cbigler
3 years ago

Replying to brookedot:

I think the next step here is to see if we can get steps to reproduce the problem with as vanilla of setup as possible. For example, with just core plugin and themes. I've seen this happen twice now across sites but never been able to narrow down the root cause. Once we have a way to reproduce we can take a look into a fix for 5.6.1.

Agreed, and should anyone stumble across this and their website uses Smart Sections for WPBakery ... their team was very responsive ... much appreciated!

#11 @sbossarte
3 years ago

I am experiencing the same here on a fresh install of WordPress, though it seems more of a race condition, as it will sometimes error out, and sometimes work just fine.

I don't want to assume too much, but from what I see here it looks like this happens because in user-profile.js, generatePassword() looks for the $toggleButton before it has been set with bindToggleButton(). This seems to be because of zxcvbn being loaded fast enough, otherwise the generatePassword gets held off until later with a timeout as seen here:

if ( typeof zxcvbn !== 'function' ) {
	setTimeout( generatePassword, 50 );
	return;
}

if bindToggleButton() is bumped up higher in bindPasswordForm(), before bindPass1 can be called, it seems like this might fix the issue.

This ticket was mentioned in Slack in #core by metalandcoffee. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

#14 @audrasjb
3 years ago

  • Milestone changed from 5.6.1 to 5.6.2

Given 5.6.1 is slated to next week, let's move this ticket to 5.6.2 to give it some more time.

#15 @charlyox
3 years ago

  • Focuses administration added

Hello there, I 'm reproducing this exact issue on Firefox for Ubuntu 84.0.2 (64 bits).
Cannot add a user nor changing an existing user's password.

Reproduction :

  • Open user account (or whatever it is in english) > add
  • get straight to the already filled password section.
  • Click the open eye to see the generated password => Does not work
  • Ask to regenerate => Nothing works
  • try to submit => Error because the passwords don't match (of course I've regenerated it)

In the console :

Uncaught TypeError: o is undefined

Strangely enough: when I then resubmit, no error. No JS error.

#16 @jadpm
3 years ago

We are experiencing the same problem especialy when using one of our pro plugins. We managed to minimize (although not remove) this by movin gone script to be enqueued in the footer, but the error is somehow erratic and happens from time to time anyway.

If this helps someone, the script we moved to the footer loads a bunch on underscore templates and relies on jQuery UI dialogs for a lot of things, but I doubt this is really relevant.

IMHO, the problem here is in any case the flawed logic for user-profile.js around the generatePassword function. It simply assumes that by the time zxcvbnis defined then $toggleButton will also be defined, which seems to be risky.

As stated above, a minimal change would be defining $toggleButton before we might try to use it on bindPass1().

#17 @desrosj
3 years ago

I spent some time investigating this today and I am also unable to reproduce this issue.

Some questions for those that are still able to reproduce:

  • Does the issue happen with all plugins disabled or on a fresh install using the latest version of WordPress (currently 5.6.1), or using trunk?
  • Does the issue persist if you place define( 'SCRIPT_DEBUG', true ); in your wp-config.php file? (this will load the un-minified versions of all JS files)

#18 @jadpm
3 years ago

I managed to reproduce this on the following cases:

  • Using SCRIPT_DEBUG always turned on, as I experience this in my local development setup.
  • With multiple versions of WordPress, since I also use the beta tester plugin and this has been happening for some time using a number of versions, both stable and nightly builds.
  • Never tried with a vanila installation, but I find it slightly irrelevant since this is not a pure compatibility issue (no other libary from a third party is causing this), but probably a side effect due to a loading race and some natural but probably wrong assumption.

While SCRIPT_DEBUG is on, the error mentions precisely that $toggleButton is not dfined. I my local debug, I noticed that the loading on the zxcvbn script changed and got loaded and executed at an early point, not sure why as this is a dynamically loaded asset injected directly on the header on windo.load.

I assume this might be triggered by some browser combination with some parties loading things on document.ready and whatnot, but it is indeed not easy to replicate and as I stated it does nto even happen all times.

But in the end, besides tryig to understand the why, the fact is that the logid pointed in the above comments show that there is a logic assuption an flow which can cause a problem because it is possible to enter a decision tree which uses undefined variables. I would suggest focusing on that.

We have a fairly large installation with a medium sized list of plugins running with this problem, preventing users from updating their own profile.

#19 @desrosj
3 years ago

  • Keywords needs-patch added
  • Milestone changed from 5.6.2 to Future Release

I did some more testing on this today, and though I do see the issue in logic being pointed out, I still want to completely understand and replicate the conditions that cause this to happen before making a change.

5.6.2 RC is going to be packaged in a few hours. Since this one still requires some investigation and lacks a patch, I'm going to punt to Future Release.

#20 @lkraav
3 years ago

I just ran into this on Firefox 87 Linux, WP 5.7. Somewhat surprisingly, loading user-new.php with SCRIPT_DEBUG succeeded with no errors, and I was able to complete add new user operation.

#21 @drago239
3 years ago

I found that in WP 5.7.1 issue remains on Firefox, but problem is that it's not always so it may be difficult to ran into this. I managed to reproduce this on fresh installation, with twentytwentyone theme, without any plugins at all. This error is showing sometimes, not always, so to reproduce this try refreshing Add New User page. In my case in some 10-20 refreshes, it shows 1 or 2 times.

I tried this on few websites, and issue is the same, WP 5.7+, Firefox 88.

Last edited 3 years ago by drago239 (previous) (diff)

#22 @sebastienserre
3 years ago

Hello All,

I confirm I reproduce this error on Ubuntu 20.04, WP 5.7.1. It disappears with define( 'SCRIPT_DEBUG', true );

#23 @thomasplevy
3 years ago

I'm seeing this (or maybe it's a different (related?) issue) on Chromium linux-737027 when running E2E tests on 5.7.1.

I have a test that visits users-new.php and creates a new user. The tests are failing with:

    TypeError: Cannot read property 'data' of undefined

      at f (http:/localhost:8080/wp-admin/js/user-profile.min.js?ver=5.7.1:2:195)
      at v (http:/localhost:8080/wp-admin/js/user-profile.min.js?ver=5.7.1:2:1185)
      at HTMLDocument.<anonymous> (http:/localhost:8080/wp-admin/js/user-profile.min.js?ver=5.7.1:2:5086)
      at e (http:/localhost:8080/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,zxcvbn-async&ver=5.7.1:2:30005)
      at t (http:/localhost:8080/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,zxcvbn-async&ver=5.7.1:2:30307)

This crops up shortly after loading the page but only when running the tests headless. If I "watch" the tests the issue doesn't happen.

I have a screenshot error reporter setup on headless mode and the error seems to occur shortly after the page finishes loading as the screenshots usually show 3-5 characters entered into the user login field (which is the first step of the test)

When enabling SCRIPT_DEBUG I no longer have an issue.

I haven't been able to reproduce this in isolation without my plugin being enabled (LifterLMS). I have tried to reproduce it by performing these actions manually in a variety of browsers with no plugins installed but in all of my attempts I come out without issue. But I'm fairly confident this isn't a plugin.

In the meantime I've switched my tests to run with SCRIPT_DEBUG enabled.

Thanks

#24 follow-up: @justinahinon
3 years ago

@thomasplevy I can also confirm that if you have an e2e test that creates a new user, you will encounter this issue with the error message : "Error: passwords don’t match. Please enter the same password in both password fields."

See screenshot https://cln.sh/vjm7JT.

#25 in reply to: ↑ 24 @justinahinon
3 years ago

Replying to justinahinon:

Worth noting that the issue is also present on Chromium (Version 88.0.4298.0) which is used by default for Core e2e tests.

#26 @waterfire
3 years ago

I have the same issue.

WordPress 5.7.2 Firefox 88.01

https://paste.pics/CM5RJ

https://paste.pics/CM5SP

#27 @bedas
3 years ago

This issue happens to me today on a brand new WP install on step 2 of the install - thus even before accessing the admin

I couldn’t solve it and hat to trash the install and re-do it, at which point it wasn’t replicable anymore

The issue was while on safari, so I don’t think this is browser or even plugin related given it happened on install steps.

@thomasplevy
3 years ago

#28 @thomasplevy
3 years ago

The above patch simply binds the toggle button if it's not already bound. I've tested this by modifying the core file directly with this and created new users (both manually and through my e2e tests that I noted earlier in this thread (https://core.trac.wordpress.org/ticket/52086#comment:23)

Since my initial comment enabling SCRIPT_DEBUG is no longer entirely reliable and I can't tell what's changed to cause that to stop fixing it. This patch seems to help though.

It feels like a bit of a true "patch" as when reading through the whole file it feels to me like this *should never happen* but it is. I don't fully understand why it's happening but this seems to fix it.

#29 @thomasplevy
3 years ago

Can we can an update on the priority of this issue for the core team? I'm trying to weigh whether or not I need to invest time in working around this issue in my E2E tests. I've had test suites failing for a while and for a time I was able to switch E2E to run with SCRIPT_DEBUG enabled but that seems to be *completely not working* since 5.8 was released.

Thanks

This ticket was mentioned in Slack in #polyglots by bedas. View the logs.


3 years ago

#31 @wpmakenorg
3 years ago

Same problem here. Only in Firefox 91.0.2 (64 bits) not in Chrome. WP version 5.8
Patch does not help either. Please advice!

This ticket was mentioned in Slack in #forums by kubiq. View the logs.


3 years ago

@kubiq
3 years ago

Window 10.0.19043.1165 + Firefox 92.0

#33 @agepcom
2 years ago

If it can help, disabling Javascript on your browser, show the old-fashion two-times password field

Version 0, edited 2 years ago by agepcom (next)

#34 @zahardoc
2 years ago

Sometimes get the same problem, and after a while, it just fixes itself. Today the same, got the issue, and after trying to console.log the variables it was magically fixed. Looks like a kind of scripts precedence issue. Will keep an eye on it.

#35 @espiat
2 years ago

Having the same issue.

It's only working, when i load the page 4 or 5 times with F5

I somehow suspect the heartbeat API.

JS Errors:

<?php
Uncaught TypeError: r is undefined
    f https://www.xyz.eu/wp-admin/js/user-profile.min.js:2
    v https://www.xyz.eu/wp-admin/js/user-profile.min.js:2
    <anonymous> https://www.xyz.eu/wp-admin/js/user-profile.min.js:2
    jQuery 2
        e
        t
user-profile.min.js:2:180
    f https://www.xyz.eu/wp-admin/js/user-profile.min.js:2
    v https://www.xyz.eu/wp-admin/js/user-profile.min.js:2
    <anonym> https://www.xyz.eu/wp-admin/js/user-profile.min.js:2
    jQuery 2
        e
        t

#36 @lkraav
2 years ago

WP 5.9: unfortunately still can't add a new user in Firefox.

#37 @mirkolofio
2 years ago

This issue is real. It's not happening 100% of the times just because it depends on load times of the single components (right? not sure.), then can vary from load to load. Also, it's happening only on slow installations (for any reason). Probably on very fast install, it's still happening but very rare.

If you use CTRL+SHIFT+R (no cache reload), it's happening 100% of times in my setup btw. As above, it's not a fast website, and it's happening with SCRIPT_DEBUG enabled/disabled. No difference.

UPDATE this is happening only if you have pass1 field autocompleted by the browser. This is the condition to trigger the flow described below:

https://github.com/WordPress/WordPress/blob/master/wp-admin/js/user-profile.js#L182
bindPass1() makes use of generatePassword() which makes use of $toggleButton (still undeclared at this point).

But $toggleButton is defined later on, here:
https://github.com/WordPress/WordPress/blob/master/wp-admin/js/user-profile.js#L212

So I think the patch attached to this post will work, but moving bindToggleButton() before line 180 would be even better.

Last edited 2 years ago by mirkolofio (previous) (diff)

#38 @mirkolofio
2 years ago

I was able to get rid of the issue by doing this in Firefox
1) Preferences
2) Privacy and Security
3) Saved logins

Once found the saved login which is causing autocomplete on the site, just delete it.

Reload the page and the issue is gone.

In summary my point of view is that:

  • we have a bug in js which must be fixed to avoid issue with that variable;
  • firefox is causing issues with their autocomplete feature --- to get rid of this, just don't save logins for your site.

Not sure if we can do something for the second bullet.

Last edited 2 years ago by mirkolofio (previous) (diff)

#39 @peterwilsoncc
2 years ago

I am able to reproduce this consistently by changing the source of zxcvbn-async to /wp-includes/js/zxcvbn.min.js in the file src/wp-includes/script-loader.php.

This forces the race condition mentioned in comment#11.

Ticket #53974 is related to this issue but occurs on the site creation screen. I'm working on a patch on that ticket.

#40 @peterwilsoncc
2 years ago

  • Milestone changed from Future Release to 6.0

#41 @peterwilsoncc
2 years ago

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

In 53122:

Upgrade/Install/Users: Prevent JS bug filling new passwords.

A JavaScript race condition was throwing an error and preventing passwords from being set if the zxcvbn library loaded earlier than expected. This could prevent the installation of WordPress or the creation/updating of user accounts.

Props adi64bit, afragen, agepcom, audrasjb, bedas, brookedot, cbigler, charlyox, costdev, desrosj, drago239, Eric3D, espiat, jadpm, jrf, justinahinon, kubiq, lkraav, michelangelovandam, mirkolofio, mkox, peterwilsoncc, poena, sbossarte, sebastienserre, SergeyBiryukov, Synchro, thomasplevy, walbo, waterfire, wpmakenorg.
Fixes #53974, #52086.

Note: See TracTickets for help on using tickets.