Material-ui: [TextField] type="number" limitations

[clement-hamon]

• [X] The issue is present in the latest release.
• [X] 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

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