Allow formatOnBlur

Are you submitting a bug report or a feature request?

Feature Request

What is the current behavior?

Formatting is immediate when user is doing an input. When the user is trying to edit a number with formatting, e.g., 1.5 percent is presented/formatted as 1.5 to user (value is stored as 0.015), the problem is when the user tries to backspace the number 1 (when the cursor is at the position before the dot in 1.5) and replace it with 3, the input becomes .5 (parsed and stored as 0.005), but then the formatting kicks in immediately, the .5 user input is replaced with 0.5, and the cursor goes to the end of the number. Then the user has to press left key two times, and then press 3. This gives a bad user experience since the user can’t edit the text in the most natural way possible.

Another problem is when the user wanted to type 2.5, as soon as 2. is typed, the value is formatted as 2, this won’t give user a chance to type 2.5 in the most natural way. The only way for 2.5 can be typed is by typing 25 first and then pressing the left key and then typing the . character.

What is the expected behavior?

Give an option that formatting happens only when the input loses focus.

Demo for the expected behavior. Backspace the number 1 in the Interest Rate per Annum of 1.5, and then press 3. http://jsfiddle.net/0zw630d4/4/

Sandbox Link

Demo: https://codesandbox.io/s/nk1828jz70

What’s your environment?

Sandbox

[erikras]

Sounds like you want a formatOnBlur?

[MichaelBuen]

Is that HOC pattern the React middleware? I’ve yet to learn how to create my own middleware in React.

Here’s the desired output: https://codesandbox.io/s/yp1j7pynqz The form needs both raw value (value when the input is the focus?) and formatted value. Formatted value activates when the input is not the focus, raw value activates when the input is the focus. And then there’s the model value, user inputs 1,234 percent as 1234 (not 1,234) just like in Excel, and then receives 12.34 as the model value, and formatted as 1,234. If the user inputs 50, the model value is 0.5, the formatted value is 50.

Important is, formatting of value model should not happen while the user is inputting the value, as the formatted value gets in the way when its value is parsed to model value. Currently, user inputs 2., it’s formatted as 2 immediately, user doesn’t get the chance to input 2.5 as the . gets scrubbed during formatting of parsed value of 0.02 to 2 only, missing the dot. Here’s the not user-friendly format/parse pairing: https://codesandbox.io/s/nk1828jz70

If that can be tackled neatly in middleware, I’ll explore it.