Issue with Chrome on Android

[divmazie]

I've enjoyed using this library! However, we just uncovered that Android users are getting scrambled inputs when they try to use it. Is this a known issue? Is there an existing solution?

[andreaswilli]

Not a known issue. A detailed description and/or a recording of the behavior would be helpful.

[divmazie]

Thanks for your response. Here is my coworker's description of the issue as he experienced it:

I can confirm that it's funky. Behaviors I saw:
1: Numbers input backwards (you enter 123456 it reads 654321)
2: Sometimes you can't backspace unless you click away from the element then back in
3: You seem to be able to continue to input past 6 digits. Basically what I noticed was that lets say you type "1234567890" it'll show "654321" and if you backspace you have to backspace 5 times before it'll do anything. (implying to me the "7890" are there just not visible.
4: If I try typing "123456" it just outright breaks when i hit 4 (other times 4 works, but consistently if i go sequentially it breaks)
However pasting a 6 digit string in appears to work, but pasting more then 6 digits breaks
The verificationlibrary seems to really not play nice with android

And here is the code that we are using to invoke your library:

<VerificationInput
                autoFocus={true}
                length={inputLength}
                value={inputValue}
                onChange={onInputChange}
                placeholder={''}
                validChars={'0-9'}
                classNames={{
                  container: 'smsAuthInputContainer',
                  character: 'smsAuthInputBox',
                  characterSelected: 'smsAuthInputBoxSelected',
                }}
                inputProps={{
                  autoComplete: 'one-time-code',
                  onKeyDown: onKeyDown,
                }}
              />

  const onInputChange = (value: string) => {
    setInputValue(value)
    if (value.length >= inputLength) {
      setIsDisabled(false)
    } else {
      setIsDisabled(true)
    }
  }
  const onKeyDown = (e: { key: string }) => {
    if (e.key === 'Enter') {
      if (!isDisabled) {
        inputSubmit()
      }
    }
  }

[andreaswilli]

Thanks for the details, I'll look into it.

Btw, are you using the latest version (3.1.2)?
If you want you can also test these examples on your device and check if the issue is also present there.

[andreaswilli]

@divmazie I tested on a Galaxy S20 with Android 10 as well as an Emulator running Android 13 and was not able to reproduce any of the described issues. Looks like I'm gonna need more information (used hard-/software, etc). It could also be something else that is interfering like a browser extension, for example.