useNumberField: old value flash after blur in controlled mode

🐛 Bug Report

When consuming useNumberField in controlled mode the previously set value will be visible briefly after blurring the input.

🤔 Expected Behavior

The input should not display the “old” value after blurring.

😯 Current Behavior

After entering a new value in controlled mode and blurring the input the previous value will flash up for a second before the new value from props is applied again.

💁 Possible Solution

The visual bug seems to be related to this useEffect in useNumberFieldState:

https://github.com/adobe/react-spectrum/blob/main/packages/@react-stately/numberfield/src/useNumberFieldState.ts#L103

  // Update the input value when the number value or format options change. This is done
  // in a useEffect so that the controlled behavior is correct and we only update the
  // textfield after prop changes.
  useEffect(() => {
    setInputValue(format(numberValue));
  }, [numberValue, locale, formatOptions]);

Switching the effect to a useLayoutEffect removes the visual glitch as the updated value is set before the browser repaints.

However, the input will still have one render cycle with the old value again (can be seen in code sample)

💻 Code Sample

Codepen showing the issue: https://codesandbox.io/s/amazing-oskar-zb73h8?file=/src/App.js (based on controlled example in docs, glitch is also visible there)

To reproduce:

• Enter a new value in the input
• Click outside the input to blur
• Old value will flash up briefly
• console.log shows the single render cycle with the old value after blurring

🌍 Your Environment

Software	Version(s)
react-aria/numberfield	3.1.3
Browser	Chrome 98.0.4758.82
Operating System	Win 10

[snowystinger]

@peteragarclover I’ve made a comment so we know there is a second reported issue here. Thanks for reporting.

[devrnt]

Yes indeed, thanks! We came across a second issue that was “caused” by StrictMode (and React 18 related). Anyway thanks for these awesome libraries (react-aria and react-stately), it has been a pleasure using them!