Input type='number' unexpected transforms

[kserjey]

🐛 Bug report

Current Behavior

Input with type='number' do not sync with state. As far as I understand it is React issue: facebook/react#1549. Even when this issue was solved, it brings more problems. You could't input float numbers, because when you try to type "," or "." after digits it would be parsed as integer: parseFloat("123,") -> 123. If you paste something like "2e2" it would be parsed as '200'. If you paste "e2" it becomes NaN and input would have an empty value.

Expected behavior

Synced state and user-friendly input without unexpected transformations

Reproducible example

Try to type 123... and then click reset button:

https://codesandbox.io/s/fragrant-water-edtg2

If you remove type='number', you get parseFloat problems

Suggested solution(s)

Do not parse integers or parse it on submit (without changing values state). The second solution requires storing input types somewhere. I found that formik somehow register fields on mount, maybe it could store input types too.

Your environment

Software	Version(s)
Formik	1.5.8
React	16.9.0
Browser	Chrome 77.0.3865.90
Operating System	MacOS 10.14.6

[kserjey]

Related to #1119

[kserjey]

May be it's convenient to make input behave like type='number': tirm all chars except digits, dots, plus, minus and e.

[johnrom]

This will be somewhat solved by #2255 , in the sense you'll be able to opt out of this functionality.

I like the fact that it automatically converts to numbers (and if you use typescript, you expect one probably), though having a desynchronized temporary value would be useful.

My personal favorite solution would be something like this:

const handleChange = (event) => {
    const nextValue = props.parse(event.target.value);
    setFieldValue(nextValue); // could be NaN or something, so it would hopefully fail to validate()

    // it didn't parse correctly, but the user could be fixing it with the next keystroke
    setFieldLocalValue(
        nextValue === undefined || nextValue === NaN 
            ? event.target.value
            : setFieldLocalValue(nextValue);
    );
}
// then pass fieldLocalValue to the input