Passing inputProps to TextField

[stephenjr]

I am trying to add a TextField with type number to my Formik form. I would also like to limit the range that this control can have (e.g. min=1, max=20, step=1). To do so I need to be able to add inputProps to the native input element rendered by TextField.

Looking at the source TextField.jsx I can see that a property for inputProps can be passed in that is then used to set the InputProps attribute. I need to be able to pass in inputProps that is then used to set the inputProps attribute (note case).

Am I missing something? Is this a bad idea?

Many thanks for the work you do.

Steve

[stephenjr]

Worked it out. Closing and leaving this here in case anyone else hits the same requirement.

var inputLabelProps = {
    shrink: true
}

const inputProps = {
    inputProps: {
        min:1, 
        max:20
    }
};

<Field
    component={TextField}
    name="barcodeLength"
    id="barcodeLength"
    label="Barcode Length"
    InputLabelProps={
        inputLabelProps
    }
    type="number"
    fullWidth={false} 
    inputProps={inputProps}
/>

[gerhat]

@stephenjr thanks a lot for your input!

Material-UI supports both InputProps (uppercase I) and inputProps (lowercase i).

Quoting the TextField API:

InputProps: Properties applied to the Input element. inputProps: Attributes applied to the native input element.

So, when you pass inputProps (lowercase i) this goes to TextField's InputProps (uppercase I) which is misleading and will be changed.

[gerhat]

@stephenjr can you please check version 0.2.2? Thanks a lot.

[stephenjr]

Hi @gerhat, thank you for a very quick fix! I've tried it and it works nicely.

[gerhat]

@stephenjr nice. Closing the issue.

[doublejosh]

Is there a version of this in Formik core? Doesn't seem to work on select fields with either capitalization.

The FieldInputProps link in the docs doesn't go anywhere.