[TextField] type="number" limitations

[clement-hamon]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The text field is accepting e alphabet if we add type = 'number'

Expected Behavior 🤔

Text field should not accept alphabets if we add type='number'

Steps to Reproduce 🕹

Steps:

1.import text field component.
2.pass type='number' as props
3. and try to add e alphabet. text field still accepting alphabet
4.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.6
React	16.8.0
Browser	Chrome
TypeScript
etc.

[oliviertassinari]

The described behavior is expected, it's how it should be working per the specifications: https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in.

<TextField inputProps={{ type: 'number'}}

However, If you are looking for a stricter pattern, you can use this solution:

<TextField inputProps={{ inputmode: 'numeric' pattern: '[0-9]*' }}>

More details in https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/. It comes with a number of advantages, like better accessibility, no scroll handling, etc.

[oliviertassinari]

We now document the issue in https://next.material-ui.com/components/text-fields/#type-quot-number-quot. See #19154 for a potentially better solution.

[igortas]

It's not working if u swap the input field between number or string type.... Let's u enter the e character ... and when u swap the input field as string, shows NaN... also let u enter two times dash...

[igortas]

It's not working if u swap the input field between number or string type.... Let's u enter special characters and when u swap the input field as string, shows NaN...

[JayNogueira]

The described behavior is expected, it's how it should be working per the specifications: https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in.

<TextField inputProps={{ type: 'number'}}

However, If you are looking for a stricter pattern, you can use this solution:

<TextField inputProps={{ inputmode: 'numeric' pattern: '[0-9]*' }}>

More details in https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/. It comes with a number of advantages, like better accessibility, no scroll handling, etc.

This solution almost works...
It still allows the "." dot character in cases like 2.000. It does not let the dot repeat or it in the front of the string.
I have been trying to use the pattern prop passing a regex to deny the dot, but I'm sure it is working.

It is good to remember that for this solution to work it is also necessary to change the type="text".

For number validation, one viable alternative is to use the default input type="text" with the pattern attribute, for example:

<TextField
  type="text"
  inputProps={{ inputmode: 'numeric' pattern: '[0-9]*' }}
>

[JahnoelRondon]

We now document the issue in https://next.material-ui.com/components/text-fields/#type-quot-number-quot. See #19154 for a potentially better solution.

For those of you wondering, this wont actually occur onBlur, You will get the error when someone goes to try and submit the form. These work very differently however.

<TextField
  inputProps={{  inputMode: "numeric", pattern: "[0-9]*" }}
/>

<TextField
  type="number"
  inputProps={{ min=0, pattern: "[0-9]*" }}
/>

An issue I found (if you can call it that) would be that using InputMode may not give you the error you want. For example if you do numeric and pattern 0-9 and try using a negative number you will get (Please match requested format). If you dont want negative numbers and restrict it this way it doesnt make that much sense to the user since they dont know what the format is. So if you are like me and want a numbered input with no e and no negative numbers (-) then use the latter instead of inputmode and you will get the error

(Value must be greater than or equal to 0) or what ever min you set instead of getting the (Please match requested format) error. Maybe there is a way in inputProps to set the warning/error however I dont know if thats a thing yet.

<TextField
  type="number"
  inputProps={{ min=0, pattern: "[0-9]*" }}
/>

I have added a solution regarding E, e - + being in inputs below

[JahnoelRondon]

The fact that this is still an issue in 2023 is crazy.
For those wanting an actual solution then here you go.

// Solution with keydown
    <TextField
      value={state.value}
      type="number"
      onKeyDown={(e) => {
        if (e.key === "e" || e.key === "E" || e.key === "-" || e.key === "+") {
          e.preventDefault()
        }
      }}
      onChange={(e) => {
        handleChange();
      }}
    />

Preventing default will stop any changes to the input from occuring and will not trigger the onchange. I found this stack over flow helpful
https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in

[joelnbl]

The fact that this is still an issue in 2023 is crazy. For those wanting an actual solution then here you go.

// Solution with keydown
    <TextField
      value={state.value}
      type="number"
      onKeyDown={(e) => {
        if (e.key === "e" || e.key === "E" || e.key === "-" || e.key === "+") {
          e.preventDefault()
        }
      }}
      onChange={(e) => {
        handleChange();
      }}
    />

Preventing default will stop any changes to the input from occuring and will not trigger the onchange. I found this stack over flow helpful https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in
thank you, this helped me!