react-redux-form icon indicating copy to clipboard operation
react-redux-form copied to clipboard

Is it possible to have a formatter and parser for numeric input?

Open tomspeak opened this issue 7 years ago • 0 comments

The Problem

I have a currency input where a user can input a any digit, at the moment the UI is not great because if you enter three hundred thousand, all you see is 300000 which is not very friendly. I wish to add comma formatting to make this easier on the eyes.

Steps to Reproduce

https://codesandbox.io/s/rlx2rwk6wo - Enter '5000', see that it formats correctly, then add another digit, and see the parsers parseInt reset the value back to 5.

Expected Behavior

I was hoping that the formatter was purely aesthetic and would not interact with the model at all. I wish to preserve "5000" in the models data, but display "5,000" to the user.

Actual Behavior

The parser overwrites the value the formatter produces.

Reproducible Code Example

https://codesandbox.io/s/rlx2rwk6wo

tomspeak avatar Jul 05 '18 13:07 tomspeak