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

[tariqrasheed172001]

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)

[LFDanLu]

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

[tariqrasheed172001]

@LFDanLu Sure.

[tariqrasheed172001]

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

[LFDanLu]

Thanks for signing the CLA! I wasn't able to reproduce the original issue you described in your issue via https://stackblitz.com/edit/hjdh3uup?file=src%2FNumberField.tsx,src%2FExample.tsx, but I'm not very familiar with TanStack Form so I could be doing something wrong. Mind adding a story or a codesandbox that reproduces the original issue so I can validate the change as well?

[tariqrasheed172001]

Thanks for signing the CLA! I wasn't able to reproduce the original issue you described in your issue via https://stackblitz.com/edit/hjdh3uup?file=src%2FNumberField.tsx,src%2FExample.tsx, but I'm not very familiar with TanStack Form so I could be doing something wrong. Mind adding a story or a codesandbox that reproduces the original issue so I can validate the change as well?

@LFDanLu I tried to create a reproduction but couldn't. The bug seems to be environment sensitive and only appears in our application.
While debugging, I noticed that commit() is wrapped in flushSync on blur but not on Enter. This causes the Enter path to be asynchronous. Since controlled form libraries read state directly while NumberField maintains its own internal state, the form ends up reading the old value before commit() has flushed.