useNumberField: old value flash after blur in controlled mode

[RubenStoesser]

🐛 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

[devrnt]

Seems like this issue is still occurring. @react-stately/[email protected] works fine (edit: 3.0.4 seems to be broken as well, but the flash is less visible and in the end the correct value is populated in the input), but starting from 3.0.5 it seems to be broken.

See working codesandbox and broken codesandbox. See reproduction above.

[snowystinger]

Hey, so it looks like you're seeing an issue with StrictMode. If you remove that, your NumberField works perfectly. I'm not sure about the difference between 3.0.4 and 3.0.5 off the top of my head. When we tackle StrictMode, hopefully this will help though.
That work will be done under this issue #779

[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!

[peteragarclover]

I'm also finding that only every second arrow key press works in StrictMode.

Repro: https://codesandbox.io/s/practical-lake-47ptck?file=/src/App.js

Is it worth creating an issue for this? Should I comment on #779?

[snowystinger]

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