React-native-web: KeyboardType does not work the same way as in React Native

Created on 15 Aug 2020  路  4Comments  路  Source: necolas/react-native-web

The problem
I want a date mask in the form of DD/MM/YYYY with a numeric input on the web.
Schermafbeelding 2020-08-15 om 14 37 22

When I fill in 21 my mask function makes it 21/ because of the format but the textinput can't parse because it is not a numeric value anymore.

Schermafbeelding 2020-08-15 om 14 31 24

Code

<TextInputWithMask
      value={formattedValue}
      keyboardType={'numeric'}
      placeholder={inputFormat}
    />

How to reproduce
https://github.com/necolas/react-native-web/blob/7ef070195bbdec4d776d1fae8f98914fe2574d58/packages/react-native-web/src/exports/TextInput/index.js#L164

Expected behavior

Use the inputmode for the keyboardType instead of editing the type itself to be more like React Native
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.13.7
  • React (version): not relevant
  • Browser: Chrome

Most helpful comment

Sounds reasonable. Want to make a PR?

All 4 comments

Maybe we should only do this for the number type because email is sometimes nice to have the right type and browser level autocomplete. The number type not so much.

Sounds reasonable. Want to make a PR?

Sure, I'll try to make one this week!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ndbroadbent picture ndbroadbent  路  3Comments

tgh picture tgh  路  3Comments

MovingGifts picture MovingGifts  路  3Comments

holmesal picture holmesal  路  3Comments

necolas picture necolas  路  3Comments