Skip to content

Fix: Wrap commit() in flushSync on Enter in NumberField#9683

Open
tariqrasheed172001 wants to merge 2 commits intoadobe:mainfrom
tariqrasheed172001:fix/numberfield-enter-flushsync
Open

Fix: Wrap commit() in flushSync on Enter in NumberField#9683
tariqrasheed172001 wants to merge 2 commits intoadobe:mainfrom
tariqrasheed172001:fix/numberfield-enter-flushsync

Conversation

@tariqrasheed172001
Copy link

Fixes the inconsistency where commit() is wrapped in flushSync on blur but not on Enter keydown in useNumberField.

Closes #9671

Problem

When a user types a value in NumberField and presses Enter:

  1. react-aria calls commit() without flushSync
  2. The browser synthesizes a trusted click on the submit button
  3. Form's onSubmit fires before commit() has flushed to React state
  4. Controlled form libraries (TanStack Form, React Hook Form, Formik) read stale/default values

This works correctly with native HTML forms because they read from the hidden input after commit() has updated state.numberValue. But controlled form libraries that read React state directly are exposed to this race condition.

Solution

Wrap commit() in flushSync() on Enter, consistent with how the blur handler already does it. This ensures the value is flushed synchronously before any consumer reads form state.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Before the fix:

  1. Create a NumberField inside a controlled form (TanStack Form, React Hook Form, etc.)
  2. Set a defaultValue (e.g., 1)
  3. Type a new value (e.g., 5)
  4. Press Enter without blurring the field first
  5. Observe: form submits with defaultValue (1) instead of typed value (5)

After the fix:

  1. Same setup as above
  2. Type a new value and press Enter
  3. Observe: form submits with the correct typed value (5)

Existing behavior preserved:

  • Blur behavior unchanged (already uses flushSync)
  • Stepper buttons work correctly
  • Native HTML form submission still works
  • All existing tests pass

🧢 Your Project:

Cryptlex (SaaS license management platform)

… is pressed in NumberField, commit() was called without flushSync, unlike the blur handler which wraps commit() in flushSync. This caused controlled form libraries reading React state immediately after Enter to receive stale values instead of the committed value. The browser synthesizes a trusted click on the form's submit button when Enter is pressed, firing onSubmit before the unguarded commit() has flushed to React state. This change wraps commit() in flushSync on Enter, making it consistent with the blur behavior and ensuring the value is flushed synchronously before any consumer reads form state. Fixes adobe#9671
@github-actions github-actions bot added the RAC label Feb 19, 2026
@LFDanLu
Copy link
Member

LFDanLu commented Feb 19, 2026

@tariqrasheed172001 Hi, thanks for the PR! Would you mind signing the CLA as mentioned here?

@tariqrasheed172001
Copy link
Author

@LFDanLu Sure.

@tariqrasheed172001
Copy link
Author

Just closed/re-open switch for Adobe CLA re-check.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

NumberField: Enter key submits stale value when used with controlled form libraries

2 participants

Comments