Summary

Fixes react-final-form#1044

Ensures that formatOnBlur is applied before validation when submitting a form, regardless of submission method (button click, Enter key, or programmatic submit).

Problem

Reported Issue: When submitting a form via Enter key (not clicking the submit button), fields with formatOnBlur=true do not have their format function applied before validation runs.

Example scenario:

• User types "react " (with trailing spaces) in a text input
• Field has format: (value) => value.trim() and formatOnBlur: true
• User presses Enter to submit
• ❌ Current behavior: Validation runs on "react " (unformatted)
• ✅ Expected behavior: Validation should run on "react" (formatted)

Why it matters: This breaks validation logic that expects formatted values. For example, a "required" validator that trims whitespace would incorrectly accept " " as valid when submitted via Enter.

Root Cause

In the submit() function, the execution order was:

1. Check for sync errors with hasSyncErrors()
2. Call beforeSubmit() (which runs field-level formatOnBlur)

This meant validation ran before formatting, so the format function never had a chance to clean up the value.

Solution

Swap the execution order:

1. Call beforeSubmit() first to allow fields to format values
2. Then check for sync errors with hasSyncErrors()

Code Changes

Before:

submit: () => {
  // ...
  if (hasSyncErrors()) {  // ❌ Validation runs BEFORE formatting
    // early return
  }
  const submitIsBlocked = beforeSubmit();  // formatOnBlur happens here
  // ...
}

After:

submit: () => {
  // ...
  const submitIsBlocked = beforeSubmit();  // ✅ formatOnBlur happens FIRST
  if (submitIsBlocked) {
    return;
  }
  if (hasSyncErrors()) {  // ✅ Validation runs AFTER formatting
    // early return
  }
  // ...
}

Impact

✅ Fixes the reported bug

• formatOnBlur now applies when submitting via Enter key
• Consistent behavior across all submission methods

✅ No breaking changes

• Just fixes the execution order to match documented behavior
• All existing tests should pass

✅ More predictable behavior

• Field-level beforeSubmit callbacks now run before validation in all cases
• Developers can rely on formatOnBlur working consistently

Testing

Manual verification needed:

1. Create a form with a field that has format: (v) => v.trim() and formatOnBlur: true
2. Type trailing spaces in the field
3. Press Enter to submit (don't click the submit button)
4. Verify that validation runs on the trimmed value

Existing tests:
All existing final-form tests should continue to pass. This change only affects the execution order within submit(), which should be covered by existing submission tests.

Related

• Issue: react-final-form#1044
• Sandbox demonstrating the bug: https://codesandbox.io/p/sandbox/3gzzkl

Fixes react-final-form#1044

Summary by CodeRabbit

• Bug Fixes
  • Field formatting now runs before final validation during form submission, so trimmed/normalized values are validated and submission is blocked if validation fails.
• Tests
  • Added end-to-end tests covering formatting-before-validation and the resulting submission behavior.
• Chores
  • Adjusted build size threshold for the distribution artifact.