Material-ui: Text field maxLength for input="number" won't work

[shin-monkey]

Problem description

MaxLength works fine for input="text" but it doesn't for input="number". I imagined that max="" would work in this case, but that didn't work either.

Steps to reproduce

Versions

• Material-UI:
• React:
• Browser:

[VLNTNA]

Hello, is there a solution for this in the meanwhile ?

[Kivylius]

Unfortunately this is default behaviour In HTML5 (Link to Thread) although I got it working with a small hack:

<TextField type="number"
    className="text-field-amount"
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
    }}
    min={0}
/>

So in this example values between 0-to-99, but you can change it to (0,35)for 35 character long numbers. From an UX view, it should not default to 0, and instead be processed later e.g
(value="")? 0 : value

Hope that helps.

[JarLowrey]

If anyone comes here trying to find out how to apply a minimum value to a number TextField in material-ui@next, look no further

<TextField
  inputProps={{
    maxLength: 0,
  }}
/>

[riki-orange]

I threw this into mine and it seems to work with type="number"

<FormControl
  ...
>
    <Input
      ...
      type="number"
    }
    inputProps={{
      min: "0",
    }}
  />
</FormControl>