In Field from react-final-form how to convert input value to float only on blur?

Question

If I use 'parse', then the user can not enter the decimal separator.

Because "9." is parsed as 9 and instantly replaces the input text.

Sandbox: https://codesandbox.io/s/xmj92nnpo

Answer 1

Yep. This is a common problem. If you want to allow decimal points, you have to keep the value as a string, and then convert it to a number at submit time. You can still use parse to remove any illegal characters (or type="number" on your <input>), but you can't parse it into a number on every keypress or you will lose your decimal points.

Answer 2

I end up with my own StatefulInput component, with 'editing' flag in the internal state. And I call Field's 'onChange' event handler only on blur.

https://codesandbox.io/s/2zpn29zzjj