Material-ui: [TextField] type=number missing min, max, step Typescript types

[tcrognon]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

<TextField type="number" min="0" max="10" step="1" /> should compile with Typescript

Current Behavior

Receive following Typescript error for min, similar for max and step: [ts] Property 'min' does not exist on type 'IntrinsicAttributes & TextFieldProps & { children?: ReactNode; }'.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.21 |
| React | 16.0.0 |
| Typescript | 2.6.1 |

[pelotom]

Does this work?

<TextField type="number" inputProps={{ min: "0", max: "10", step: "1" }} />

[tcrognon]

Yes that works. inputProps accepts an object with anything in it, though, so I'm effectively opting out of the type system by doing it this way.

[pelotom]

Yes that works. inputProps accepts an object with anything in it, though, so I'm effectively opting out of the type system by doing it this way.

Good point, I've opened #9321 to fix the typing of inputProps.

[rosskevin]

inputProps is intended to allow for _anything goes_ on an InputComponent. This allows for open integration with external components, for which unfortunately we may not know or have types.

Example:

import * as MaskedInput from 'react-text-mask'

      <TextField
        InputProps={{
          inputComponent: MaskedInput,
        }}
        inputProps={{
          guide: false,
          mask,
          placeholderChar: '\u2000',
        }}
        type="tel"
        value={value}
      />

[rosskevin]

So the alternative to avoiding strongly typed inputProps in the same scenario (thanks @pelotom) is

import { InputProps as MuiInputProps } from 'material-ui/Input'

      <TextField
        InputProps={{
          inputComponent: (inputProps: MuiInputProps) => (
            <MaskedInput {...inputProps} guide={false} mask={mask} placeholderChar="\u2000" />
          ),
        }}
        type="tel"
        value={value}
      />

@pelotom is filing a new proposal/issue to revisit this API.

[GaddMaster]

@rosskevin
MaskedInput is not defined,
mask is not defined
:(

[djwashburn]

This seems like an overly complicated workaround

[CareerFairPlus]

It would be better to define these at the TextField level, so that validation can be performed without a bunch of repeated logic everywhere. I'd hate to have to extend TextField every time I want to use it for a number field with min/max/step requirements.