Skip to content

Try to enable submit button on safari autofill #3170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Crabcyborg wants to merge 3 commits into from
Closed

Try to enable submit button on safari autofill #3170

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4afdcd
Try to enable submit button on safari autofill
Crabcyborg Jun 23, 2026
60d00cd
Remove the alert
Crabcyborg Jun 23, 2026
70edd5a
Use object shorthand
Crabcyborg Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion paypal/js/frontend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -718,7 +718,12 @@
onError,
style: frmPayPalVars.style,
inputEvents: {
onChange: onCardFieldsChange
onChange: onCardFieldsChange,
onFocus() {
// onBlur only triggers if onFocus is defined.
// But we don't need to do anything on focus.
},
onBlur: onCardFieldsBlur
}
};

Expand Down Expand Up @@ -749,6 +754,19 @@
}
}

/**
* Handle card field blur events.
* This detects autofilled fields that may not trigger onChange.
*
* @param {Object} data The onBlur event data.
*/
function onCardFieldsBlur( data ) {
if ( selectedMethod === 'card' && data.isFormValid ) {
cardFieldsValid = true;
enableSubmit();
}
Comment on lines +763 to +767

@coderabbitai coderabbitai Bot Jun 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Handle invalid blur state to avoid stale enabled submit

On Line 764, the blur handler only updates state when data.isFormValid is true. If Safari autofill/event behavior skips onChange on an invalid transition, the submit button can stay enabled from a previous valid state. Mirror onCardFieldsChange by handling both branches in onCardFieldsBlur.

Proposed fix 
 function onCardFieldsBlur( data ) {
-	if ( selectedMethod === 'card' && data.isFormValid ) {
-		cardFieldsValid = true;
-		enableSubmit();
-	}
+	if ( selectedMethod !== 'card' ) {
+		return;
+	}
+
+	cardFieldsValid = !! data.isFormValid;
+	if ( cardFieldsValid ) {
+		enableSubmit();
+	} else {
+		disableSubmit( thisForm );
+	}
 }
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@paypal/js/frontend.js` around lines 763 - 767, The onCardFieldsBlur function
only handles the case when data.isFormValid is true, leaving the cardFieldsValid
state unchanged when the form becomes invalid, which can result in a stale
enabled submit button. Add an else branch to the existing if condition that
checks if selectedMethod is 'card' and data.isFormValid is false, then set
cardFieldsValid to false and call a function to disable the submit button
(similar to what onCardFieldsChange does for the invalid case) to ensure the
submit button state stays synchronized with the actual form validity.

}

/**
* Render the card number / expiry / CVV fields into the method container.
*/
Expand Down
Loading