Fix/numberfield format options input reset by Wonchang0314 · Pull Request #9905 · adobe/react-spectrum

Wonchang0314 · 2026-04-10T01:52:13Z

Closes #1893
Related to #9899

Summary

When formatOptions is passed as an inline object literal (e.g. formatOptions={{ style: 'currency',
currency: 'USD' }}), every parent re-render creates a new object reference. This caused
useNumberFieldState to detect a "change" in formatOptions and overwrite the current inputValue with
the last committed number value — resetting whatever the user was typing mid-input.

This fix stabilizes the formatOptions reference inside useNumberFieldState using a useRef and a
shallow equality check. If the new formatOptions has the same key-value pairs as the previous one,
the old reference is reused, preventing a spurious inputValue reset. I though this approach is appropriate
because all values in Intl.NumberFormatOptions are primitives (strings, numbers, booleans), so
shallow equality is equivalent to deep equality.

✅ 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:

Run the existing NumberField test suites to verify nothing is broken:
yarn jest packages/react-aria-components/test/NumberField.test.js
yarn jest packages/@adobe/react-spectrum/test/numberfield/NumberField.test.js
The two new regression tests specifically cover this fix:
- "does not reset input value when parent re-renders with same formatOptions content" — a parent
component with its own state re-renders while formatOptions is an inline object literal; the typed
value must be preserved.
- "does not reset input during typing when re-rendered with same formatOptions content" — same
scenario via the rerender helper.
To manually verify: render a NumberField with formatOptions={{ style: 'currency', currency: 'USD'
}} as an inline literal inside a component that re-renders on some other state change. Type a value
without committing (no blur/Enter) and trigger the parent re-render — the typed value should no
longer be reset.

🧢 Your Project:

…nput reset on re-render

LFDanLu · 2026-04-15T20:45:02Z

@Wonchang0314 thanks for the PR! Mind signing the CLA?

LFDanLu · 2026-04-15T20:47:23Z

When I removed the changes made in useNumberFieldState and ran the tests, they still passed. Can you double check these and make sure they fail without the changes and pass with the fix? If that is proving difficult, feel free to add a storybook reproduction so we can more easily verify these changes,

@LFDanLu Yes, I'm happy to sign the CLA. Should I just sign and submit the CLA form as an individual?

@LFDanLu I found that the existing tests were not effectively covering this case, so I removed them. The issue here involves a state update triggered during render, which is not reliably reproduced in the jsdom environment.

Instead, I added tests using renderHook to directly test useNumberFieldState. I verified the behavior both before and after the fix to ensure that the issue is reproducible without the fix and resolved with it.

Thanks for taking a look!

@Wonchang0314 Yep, you can just sign it as an individual. You might need to close and re-open the PR for it to run the check

Hi @yihuiliao, I reopened the PR and it seems like all set. Would you mind taking a quick look when you have time?

yihuiliao · 2026-04-15T20:56:15Z


+  // Stabilize formatOptions reference to avoid unnecessary re-renders
+  // when consumers pass inline object literals with the same content.
+  let formatOptionsRef = useRef(formatOptions);


seems like the lint is breaking here due to this change: Reading from refs during rendering is not allowed.

Correct, this is not allowed as it can break React concurrency

yihuiliao · 2026-04-15T22:12:35Z

maybe we should update the equality check here instead?

I agree with your suggestion to update the equality check here. I've applied the fix and pushed the changes.

…e tests

yihuiliao · 2026-04-20T20:04:41Z

+describe('useNumberFieldState', () => {
+  describe('formatOptions stability', () => {
+    it('does not reset inputValue when re-rendered with same formatOptions content', () => {
+      let initialFormatOptions = {unit: 'millisecond', useGrouping: false};


Suggested change

let initialFormatOptions = {unit: 'millisecond', useGrouping: false};

let initialFormatOptions = {style: 'unit', unit: 'millisecond', useGrouping: false};

yihuiliao · 2026-04-20T20:10:10Z

+      expect(result.current.inputValue).toBe('2');
+    });
+
+    it('resets inputValue when formatOptions content actually changes', () => {


im assuming this and the test below passed before these change were made and we just didn't have test coverage for them?

yes, those two tests cover behaviors that already worked before this fix. If you think tests 2 and 3 are unnecessary, I can remove them.

happy to have more test coverage, just wanted to make sure i was understanding things correctly!

snowystinger

lgtm

Wonchang0314 and others added 2 commits April 9, 2026 23:24

fix(numberfield): use shallow equality for formatOptions to prevent i…

730a4f0

…nput reset on re-render

test(numberfield): add test codes for inline formatOptions stability

885f69d

github-actions Bot added the RAC label Apr 10, 2026

LFDanLu reviewed Apr 15, 2026

View reviewed changes

yihuiliao reviewed Apr 15, 2026

View reviewed changes

github-actions Bot removed the RAC label Apr 16, 2026

Wonchang0314 force-pushed the fix/numberfield-format-options-input-reset branch from fe21549 to 885f69d Compare April 16, 2026 02:08

github-actions Bot added the RAC label Apr 16, 2026

Wonchang0314 added 2 commits April 16, 2026 11:09

fix(numberfield): use deep equality for formatOptions

2ac0320

test(numberfield): replace component tests with renderHook-based stat…

8444bd2

…e tests

github-actions Bot removed the RAC label Apr 16, 2026

Wonchang0314 closed this Apr 17, 2026

Wonchang0314 reopened this Apr 17, 2026

Wonchang0314 closed this Apr 17, 2026

Wonchang0314 mentioned this pull request Apr 17, 2026

Fix/numberfield format options input reset (reopened PR) #9942

Closed

5 tasks

Wonchang0314 reopened this Apr 20, 2026

yihuiliao reviewed Apr 20, 2026

View reviewed changes

test(numberfield): add style: 'unit' to formatOptions test fixture

f1ff1cf

yihuiliao approved these changes Apr 20, 2026

View reviewed changes

snowystinger approved these changes Apr 22, 2026

View reviewed changes

snowystinger added this pull request to the merge queue Apr 22, 2026

Merged via the queue into adobe:main with commit b0bfcb8 Apr 22, 2026
28 checks passed

Wonchang0314 mentioned this pull request Apr 22, 2026

fix(number-field): stabilize formatOptions reference to prevent input… heroui-inc/heroui#6417

Closed

yihuiliao added the no testing Does not require manual testing during testing session label May 1, 2026

	let initialFormatOptions = {unit: 'millisecond', useGrouping: false};
	let initialFormatOptions = {style: 'unit', unit: 'millisecond', useGrouping: false};

Conversation

Wonchang0314 commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

LFDanLu commented Apr 15, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wonchang0314 Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wonchang0314 Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wonchang0314 Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wonchang0314 Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Wonchang0314 commented Apr 10, 2026 •

edited

Loading

Wonchang0314 Apr 16, 2026 •

edited

Loading

Wonchang0314 Apr 16, 2026 •

edited

Loading

Wonchang0314 Apr 20, 2026 •

edited

Loading

Wonchang0314 Apr 20, 2026 •

edited

Loading