React-final-form: Allow formatOnBlur

[MichaelBuen]

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

[MichaelBuen]

A not so neat work-around, store both the view value and model value:
https://codesandbox.io/s/yp1j7pynqz

It would be best to just store a single value (model). Perhaps format could be made to be called only when the change action is not caused by user input and also when the input loses focus. If the change action happens while the user is inputting the value, don't call format.

[erikras]

Sounds like you want a formatOnBlur?

[Togrias]

Wouldn't a HOC pattern be better for this use case? Store the rawValue on the HOC's state and depending on whether your form wants formattedValue or rawValue, pass the applicable value to input.onChange. Then supply the formattedValue to the wrapped component.

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

[jbinto]

I think formatOnBlur would help a ton. The codesandboxes @MichaelBuen posted illustrate the problem and desired solution perfectly: I want to make display-facing changes to my inputs, but only on blur. I don't want my input changing while I'm editing it.

[erikras]

Published formatOnBlur prop in v3.6.0. See example:

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.