Handling number input with Redux Form does strange things

Question

Using the age field on https://redux-form.com/7.2.1/examples/fieldlevelvalidation/ as an example.

You can enter numbers, +, - and e. Like below:

But it doesn't look like Redux Form recognizes those inputs. If you try to use the parse or normalize lifecycle methods, the value comes through as ''.

Also as in the screenshot the validation says the field is required, as if it is empty.

Is there a way to handle these?

The only way I have found to eliminate this is to add a keyDown listener on the input field. It doesn't feel that clean though. — Jan Swart, Jan 22 '18 at 09:43

Andrew Paramoshkin · Answer 1 · 2018-01-22T08:47:42.677

5

The easies way to handle it is use parse like that:

<Field
    name="age"
    type="number"
    component={renderField}
    label="Age"
    validate={[required, number, minValue18]}
    warn={tooOld}
    parse={(val) => parseInt(val, 10)}
  />

But parse function should be mach more smarter than in this example =)

P.S. Don't forget, that according to documentation you should return new value from parse (https://redux-form.com/7.2.1/docs/api/field.md/#-code-format-value-name-gt-formattedvalue-code-optional-)

UPD
Example with type='string' and normalize LC. - https://codesandbox.io/s/x7n01yvj5z

edited Jan 22 '18 at 08:47

answered Jan 19 '18 at 13:58

Andrew Paramoshkin

999
6
15

This doesn't make a difference. I tried parsing / filtering with a regex on both the parse and normalize lifecycle hooks, but unless the input field has an initial value, you can enter e, + and - into the number field. It is as if redux form doesn't recognize these inputs. – Jan Swart Jan 22 '18 at 08:26
You can find an example there https://codesandbox.io/s/x7n01yvj5z Note: I've changed type from number to string, because `normalize` handles input by itself – Andrew Paramoshkin Jan 22 '18 at 08:45
I wanted to use the number input to show the user a numeric keypad on mobile devices - this gets lost when using input type text. I've even thought about rendering different components (number and text) depending on mobile vs desktop device. I'm more concerned why Redux Form allows this on the first character? As if it doesn't pick up that a key was pressed. – Jan Swart Jan 22 '18 at 09:31
`input type="number"` allows it, not Redux Form. If you didn't specify any additional parse/normalize function Redux Form just handle raw changes. So as numeric input allows this syntax it will be allowed with redux form – Andrew Paramoshkin Jan 22 '18 at 11:37
1

Yes, I get that, but the problem is that the parse/normalize functions aren't even called if it is entered as the first character. After that you can enter any combination of numbers, e's, +'s and -'s without ever triggering these lifecycle hooks. Check my original question. It even thinks the field is empty, as if there is no value in it. – Jan Swart Jan 22 '18 at 11:41
Strange behaviour. Try to read this article - https://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input. Maybe you'll find a way to force numeric keyboard for text inputs – Andrew Paramoshkin Jan 22 '18 at 11:50
This worked for `boolean` types as well: `parse={value => value === 'true'}` +1 – Rahul Desai Jul 02 '19 at 22:38

score 1 · Answer 2 · answered Jun 11 '20 at 03:00

This is how I have solved this problem,

<Field
    name="age"
    type="text"
    pattern="[0-9]*"
    inputMode="numeric"
    component={renderField}
    label="Age"
    validate={[required]}
    warn={tooOld}
    normalize={ val => (val || "").replace(/[^\d]/g, "") }
/>

so basically type="text", pattern="[0-9]*" and inputMode="numeric" are required to accept all input values yet forcing the browsers to trigger numeric keypad. Remove the number validation from validate and lastly use the redux-from's normalize api to manipulate input values.

Handling number input with Redux Form does strange things

2 Answers2