Is your feature request related to a problem? Please describe.
From MDN:
The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents.
Currently, RNW does not support the inputMode prop being passed down to the underlying <input/>.
Describe a solution you'd like
RNW should allow passing an inputMode prop that will, in turn, be passed down to the underlying <input/>.
Describe alternatives you've considered
Currently I'm working around this by using RNW's createElement to pass the prop down directly, but I'd much prefer being able to do this natively.
Additional context
While similar to the input's type attribute, inputmode gives more fine-grained control over the type of virtual keyboard displayed in mobile browsers. For instance, setting inputmode to "decimal" will display a numpad keyboad with a decimal key on mobile Safari in iOS, as opposed to the standard keyboard with the numbers across the top.
Another use case is in the instance where the value is being formatted (e.g., currency) before being displayed in the input. To achieve this, you can't use <input type="number" /> because it doesn't support non-numeric values - however, by using inputmode="decimal", you can still bring up the number pad keyboard on mobile and provide a better user experience. (A good example of this behavior is Stripe's CC entry field element, where they're formatting the value as you type it in (so using type="text"), but using inputmode to display the numpad keyboard).
To help see how this works, I've created a Codesandbox example showing the different ways type and inputmode can be used together, as well as demonstrating that it currently doesn't work with a RNW <TextInput/>. Note that these are best viewed in a mobile device browser!
I'd be more than happy to contribute a PR to see this happen, but I'm not certain the best way to implement it as it seems like the way props are getting filtered differs between the master and next branches.
Is your feature request related to a problem? Please describe.
From MDN:
Currently, RNW does not support the
inputModeprop being passed down to the underlying<input/>.Describe a solution you'd like
RNW should allow passing an
inputModeprop that will, in turn, be passed down to the underlying<input/>.Describe alternatives you've considered
Currently I'm working around this by using RNW's
createElementto pass the prop down directly, but I'd much prefer being able to do this natively.Additional context
While similar to the input's
typeattribute,inputmodegives more fine-grained control over the type of virtual keyboard displayed in mobile browsers. For instance, settinginputmodeto "decimal" will display a numpad keyboad with a decimal key on mobile Safari in iOS, as opposed to the standard keyboard with the numbers across the top.Another use case is in the instance where the value is being formatted (e.g., currency) before being displayed in the input. To achieve this, you can't use
<input type="number" />because it doesn't support non-numeric values - however, by usinginputmode="decimal", you can still bring up the number pad keyboard on mobile and provide a better user experience. (A good example of this behavior is Stripe's CC entry field element, where they're formatting the value as you type it in (so using type="text"), but usinginputmodeto display the numpad keyboard).To help see how this works, I've created a Codesandbox example showing the different ways
typeandinputmodecan be used together, as well as demonstrating that it currently doesn't work with a RNW<TextInput/>. Note that these are best viewed in a mobile device browser!I'd be more than happy to contribute a PR to see this happen, but I'm not certain the best way to implement it as it seems like the way props are getting filtered differs between the master and next branches.