andreaswilli/react-verification-input

OTP problem

centauruspool opened this issue · 6 comments

centauruspool commented

When the user receives the sms code, you can see it on top of your keyboard inside you mobile app. If you press the code, it gets sent to the input, but only in that white box that you see when you have the debug set as true.

andreaswilli commented

Thanks for the report. Is this happening on an iPhone or on Android? Also, do you know how this can be tested (e.g. iPhone simulator etc.)?

centauruspool commented

I only tested it on an iPhone with a sim card (so I could receive the SMS code).

Another hint would be that when you press one number on the keyboard, the rest of the numbers from the sms code are shown in the input as well.

andreaswilli commented

What's your exact setup? I just tried with this option and it seems to work fine:

<VerificationInput inputField={{ autocomplete: "one-time-code" }} />

centauruspool commented

Hmm, weird.

It's a cordova project:

cordova-ios: 5.0.1
react: 15.4.1,
cordova-plugin-keyboard: 1.2.0

<VerificationInput
          character={{ classNameSelected: 'character--selected' }}
          input={{ onChange: value => this.setState({ code: value }) }}
          inputField={{
            autoComplete: 'one-time-code',
            type: 'tel',
          }}
          placeholder="."
          removeDefaultStyles
          validChars={'0-9'}
/>
centauruspool commented

The issue is that the 'button' on the keyboard that has the OTP attached to it, does NOT have a keycode. So when you press it, the onKeyUp event, doesn't get triggered.

andreaswilli commented

This should be resolved in v2.0.0 as it does no longer rely on the keyUp event to detect changes.