[TextField] type=number missing min, max, step Typescript types

[tcrognon]

• 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.

[Angelk90]

@pelotom , @oliviertassinari , @rosskevin :

If the numbers are entered as input as shown in the image it is easy to bypass the control.

Is there a solution?

Link: codesandbox

[oliviertassinari]

@Angelk90 Maybe you can control the value prop and apply the limit when the input is blurred (⚠️ only when blurred). At least, the limits fail the validation of the field when into a form.

Related to #19154

[Absleepy]

this doesn't work when you type something.

[Himanshudabhi34]

How to write float value in TextField as input in material ui component for multiple input field ??

[Absleepy]

@Himanshudabhi34 Can you Please provide more details? What do you mean by float value in textfield? As it already accept.