Material-ui: Support `inputmode` attribute in `Input` components

[phacks]

• [x] 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' }} />

Edit @eps1lon:

-<TextField inputProps={{ inputmode: 'numeric' }
+<TextField inputProps={{ inputMode: 'numeric' }

camelcase dom properties

[eps1lon]

Didn't know about this. Thank you. I'm always happy if my phone switches to numpad for numeric inputs and I never bothered checking if this just looks at type.

[phacks]

@oliviertassinari It does work indeed, reproduced it in this codesandbox (to be tested on mobile devices).

However I feel like it should reside next to (and documented alongside of) the type prop, as they are closely related. What do you think? Would you be open to a Pull Request on the matter?

Another advantage would be to document / type the possible values, as of now the underlying type is only string (derived from React.InputHTMLElement typing).

[oliviertassinari]

So far, the tradeoff is to only forward the most common props from the text field to the input. I don't think that we should add such a prop, it would create a precedent to include not frequent props and open the door to support x20 more which is an issue with bundle size.

[phacks]

Makes sense! I’m closing the issue, thanks

[onzag]

Type '{ inputMode: string;}' is not assignable to type 'InputBaseComponentProps'.

Got this error after updating to 4.7.0

[onzag]

The field expects you to hardcode your input mode, or use a ternary operator; but you cannot seem to be able to calculate it because you have no option but to use a string; seems a bit odd, after all I can use type=... in that way.