Formik automatically converts input type number value to float
Bug report
Current Behavior
When a form field is an <input type="number" />, Formik automatically parses the value to a float. It does so here:
val = /number|range/.test(type)
? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)
: /checkbox/.test(type) ? checked : value;This behavior was unexpected for me. It ended up causing an issue in validation where I was doing a truthiness check on the value and was expecting "0" to be the value, but it ended up being the number 0. This also opens you up for type errors even when using Typescript. I have the form value typed like { value: string }, but it would really need to be { value: string | number }, since the type of the value will change depending on if the input is empty of not. It seems like a pretty easy mistake to make.
Expected behavior
By default, I would expect Formik to not interfere with the default behavior of <input type="number /> and keep the value as a string. The value automatically parsing the value doesn't seem to be worth the confusion it causes by differing from the default React behavior. The answer to this issue, where the suggestion to achieve such behavior was to build your own NumberInput component, would be what I expect.
Reproducible example
https://codesandbox.io/s/40kq34q69. Typing numbers into the Formik Number Input results in the type of the value being a number, whereas the Normal Number Input remains a string.
Suggested solution(s)
No longer call parseFloat for <input type="number" />. I imagine if we did end up making this change, it would make sense to be consistent and also not do it for <input type="range" /> as well. It looks like this behavior has been a part of Formik a long ways going back, so it would definitely be a breaking change.
Your environment
| Software | Version(s) |
|---|---|
| Formik | v1.3.2 |
| React | v16.6.3 |
| TypeScript | v3.1.6 |
| Browser | Chrome |
| npm/Yarn | Yarn 1.12.3 |
| Operating System | Mac OS X |
Source: jaredpalmer/formik