Open ryan-case-ml opened 2 years ago
@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!
@AnnaKudriasheva i tried this, and im still seeing a text keyboard on mobile android in chrome
@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
.
@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
@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!
awesome, thank you @AnnaKudriasheva!
@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.
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
thank you for the update @flor-master
thank you @flor-master
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 oftext
, and aninputMode
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 haveinputMode
as numeric whenhideValue
is true, but when this is set to false, this gets removed from the input for most field types. The only field type whereinputMode
remains asnumeric
whether or nothideValue
is true or false is thenumber
type. But inputs with this type do not support things likemaxLength
which is needed to limit PIN inputs to 4 characters.