inputMode should be configureable

[ryan-case-ml]

Expected Behavior

When initializing a form field, VGS should expose the option to configure the inputMode of the field. For example, a PIN input would have a type of text, and an inputMode of numeric, so that a numeric keyboard is opened on mobile web across all platforms.

Current Behavior

The inputMode of a field is currently assumed based on the type of the field. Some fields have inputMode as numeric when hideValue is true, but when this is set to false, this gets removed from the input for most field types. The only field type where inputMode remains as numeric whether or not hideValue is true or false is the number type. But inputs with this type do not support things like maxLength which is needed to limit PIN inputs to 4 characters.

[AnnaKudriasheva]

@ryan-case-ml VGS Collect allows passing inputMode attribute in the field configuration. Please try the following configuration:

const pin = form.field('#pin-code', {
  type: 'text',
  name: 'pin-code',
  validations: ['required'],
  placeholder: 'PIN',
  inputMode: 'numeric',
});

Please let us know if it didn't work out so we can investigate the issue further. Thank you!

[ryan-case-ml]

@AnnaKudriasheva i tried this, and im still seeing a text keyboard on mobile android in chrome

[AnnaKudriasheva]

@ryan-case-ml unfortunately I can't reproduce the issue, can you please open the following code example on your android device to check if it's working: https://codepen.io/Averanya/pen/ZExNexV

Please also make sure you're using collect version > 2.0.0 preferably the latest one - 2.15.0.

[ryan-case-ml]

@AnnaKudriasheva please see this example (slightly modified from yours) where a show/hide value button is added. you'll notice that once hideValue is toggled, we no longer get a numeric keyboard for this input despite inputMode still being numeric https://codepen.io/Ryan-T-Case/pen/zYWQwjK

[AnnaKudriasheva]

@ryan-case-ml thank you for the updated example. Now I'm able to replicate it, seems like it appears only on android devices. I'll open a ticket internally and will keep you posted here. Thanks for reporting an issue!

[ryan-case-ml]

awesome, thank you @AnnaKudriasheva!

[tungtran-zb]

@AnnaKudriasheva It's OK when type=text and inputmode=numeric But when I use type=password and inputmode=numeric, it always renders inputmode=text Can you have any solution for me, I need pin input in mobile.

[flor-master]

Hi, sorry for the delay We checked, and yes, for input type="password" we ignoring inputMode attribute. We will fix it in the next release, but I try to reproduce and resolve your issue and try to run the Android simulator + native HTML input with inputmode="numeric" and got the same issue Android ignores inputmode for input type="password" looks like it's a platform issue

[ryan-case-ml]

thank you for the update @flor-master

[tungtran-zb]

thank you @flor-master