Skip to content

KP-FIX: Safari/iOS password autofill #519

Description

@superdav42

==========================================================

PROBLEM:
When users paste or autofill passwords on mobile (Safari/Chrome iOS),
the checkout shows "Password is too weak" even for strong passwords.

ROOT CAUSE:
Safari/iOS autofill and paste do NOT fire 'keyup' or 'input' DOM events.
wu-password-strength.js only listens for those two events, so checkStrength()
never runs, valid_password stays false, and checkout.js line 609 shows the
"weak password" error for ANY autofilled/pasted password.

FIX (2 files, minimal changes):

--- a/assets/js/wu-password-strength.js (init method)
+++ b/assets/js/wu-password-strength.js
@@ Listen for 'change' event + autofill polling @@

  •       this.options.pass1.on('keyup input', function() {
    
  •       // Include 'change' for Safari/iOS autofill which
    
  •       // does NOT fire keyup/input when auto-generating passwords.
    
  •       this.options.pass1.on('keyup input change', function() {
              self.checkStrength();
          });
    
          if (this.options.pass2 && this.options.pass2.length) {
    
  •           this.options.pass2.on('keyup input', function() {
    
  •           this.options.pass2.on('keyup input change', function() {
                  self.checkStrength();
              });
          }
    
  •       // KP-FIX: Safari autofill detection — poll for value changes
    
  •       // that bypass all DOM events (known WebKit bug).
    
  •       this._lastPass1Val = '';
    
  •       this._autofillPoll = setInterval(function() {
    
  •           var currentVal = self.options.pass1.val();
    
  •           if (currentVal !== self._lastPass1Val) {
    
  •               self._lastPass1Val = currentVal;
    
  •               self.checkStrength();
    
  •           }
    
  •       }, 1000);
    
  •       // Stop polling after 60 seconds to avoid unnecessary CPU usage
    
  •       setTimeout(function() {
    
  •           if (self._autofillPoll) {
    
  •               clearInterval(self._autofillPoll);
    
  •               self._autofillPoll = null;
    
  •           }
    
  •       }, 60000);
    

--- a/assets/js/checkout.js (validate_form method, ~line 607)
+++ b/assets/js/checkout.js
@@ Safety net: re-check before showing error @@

        this.request('wu_validate_form', form_data, function (results) {
  •           // KP-FIX: Re-check password strength before showing error.
    
  •           // Safari/iOS autofill does NOT fire keyup/input events,
    
  •           // so valid_password may be stale. Force a synchronous re-check.
    
  •           if (! that.valid_password && that.password_strength_checker) {
    
  •               that.password_strength_checker.checkStrength();
    
  •           }
    
  •           if (! that.valid_password) {
                  that.errors.push({
                      code: 'password',
    

TESTING:

  • Paste password on mobile -> should now show correct strength
  • Type password manually -> unchanged behavior (regression-safe)
  • Autofill via Safari/Chrome -> detected by polling within 1 second

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions