Support `inputmode` attribute in `Input` components

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

Summary 💡

inputmode is a HTML5 attribute for input tags allows the browser to hint at which type of keyboard (on mobile devices) it should pop up: text, numeric, decimal…

Its advantage on type="number" is summed up by the spec:

The type=number state is not appropriate for input that happens to only consist of numbers but isn’t strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g., with “up” and “down” arrows). Getting a credit card number wrong by 1 in the last digit isn’t a minor mistake, it’s as wrong as getting every digit incorrect.

Its browser support is not that great however:

Examples 🌈

Try out this codesandbox on mobile to see an input with type="text" pop up the numeric keyboard on mobile.

Motivation 🔦

I’m trying to have a TextField component pop up a numeric keyboard on mobile without coercing the value inside the field to a number (which does not work in my case as we manipulate a comma-separated decimal in our French locale).

Should there be enough support for this feature request, I’d be happy to take care of it!

[oliviertassinari]

@phacks Does it solve the problem?

<TextField inputProps={{ inputMode: 'numeric' }} />

[git-allcard]

inputProps={{ inputMode: 'numeric' }

Until now it’s not working.

<TextField id = “age” label = “Age” variant = “outlined” placeholder=“Enter Your Age” fullWidth type=“number” inputProps={{ inputMode: ‘numeric’ }} margin = “normal” {…field} error={Boolean(errors?.ageField) } helperText={errors.ageField?.message} />