Set min/max on TextField type="number"?
The redux-form Field will pass props through to the component:
All other props will be passed along to the element generated by the component prop.
The TextField has a property named InputProps
which can be used to pass props to the Input component it renders. This is also true if you're using redux-form-material-ui
. Its TextField is simply a wrapper for the material-ui component.
The material-ui Input
component has a property named inputProps
which can be used to pass props to the input
element it renders.
Ok, so what do I do?
You need to pass props all the way through, from Field
, to TextField
, to Input
, to the input
element.
So if we set InputProps
on Field, it will be passed to TextField, which will pass it to the Input
component. If the object we pass contains an inner inputProps
(intentional lowercase 'i'), the Input component will pass it to the input
element.
A game of hot-proptato:
Basically, define an inputProps
object within InputProps
and apply it to Field
:
<Field
name="maxNodeSelectedCount"
component={TextField}
label="Max Node Selected Count"
type="number"
InputProps={{ inputProps: { min: 0, max: 10 } }}
format={formatOption}
normalize={normalizeOption}
{...propertyFieldDefaults}
/>
- Field passes InputProps to
TextField
- TextField passes the contents of InputProps to the
Input
component - Input passed the contents of inputProps to the
input
element
There is a caveat with this:
The current implementation of TextField sets its own value for inputProps
so that the inputClassName
is applied to the input
element.
By handing your own value of inputProps to TextField, you will overwrite the version applied by TextField, leaving inputClassName
unset. If are using inputClassName
you will need to include it in the inner inputProps
object.
EDIT: I have submitted an issue and pull request to address this caveat in a future release.
Simply use your inputprops well
<TextField
type="number"
InputProps={{
inputProps: {
max: 100, min: 10
}
}}
label="what ever"
/>
notice the upper and lower case in the inputprops
credit to Ken Gregory