[BUG] - V3 NumberField resets if a parent component has a prop change

[jbree]

HeroUI Version

3.0.2

Describe the bug

NumberField resets its displayed value after parent re-render due to changed prop

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-rqadeopw?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

Type a new value into the input. When the timer changes a prop on the wrapper, the NumberField resets to default value.

Expected behavior

I expect that the input should retain its value across re-renders.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[Wonchang0314]

@jbree
The issue originates in useNumberFieldState (from @react-stately/numberfield), which tracks formatOptions changes
using reference equality (!==):

  if (!Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions !== prevFormatOptions) {
    setInputValue(format(numberValue)); // resets typed input to last committed value
  }

Since formatOptions is typically passed as an inline object literal (e.g. formatOptions={{ style: "currency" }}), a
new object reference is created on every parent re-render — even when the content hasn't changed. This causes
setInputValue to fire unnecessarily, reverting the displayed value to the last committed number.

Workaround I applied:

NumberFieldRoot now stabilizes the formatOptions reference using a derived-state pattern — only propagating a new
reference to React Aria when the contents actually change (via shallow equality check).

Upstream fix needed:

I think proper long-term fix should be in react-spectrum — replacing the formatOptions !== prevFormatOptions reference
check with a shallow equality comparison. Until that lands, the workaround in HeroUI covers this case.

[jbree]

@Wonchang0314 Thanks! I am able to workaround locally by creating state and passing into NumberField formatOptions also

  const [formatOptions] = useState({ unit: 'millisecond', useGrouping: false })