SMS autocomplete not working properly on safari iOS about react-verification-input HOT 6 CLOSED

So far I wasn't able to reproduce the issue.

However, I noticed two things:

1. You are not setting inputProps={{ autoComplete: "one-time-code" }} on the component. According to Apple this is required to enable autocomplete and I don't get the option to fill in codes without setting this attribute on the input. Is this maybe something that changed in iOS 15 (I can only test 14.3 atm) or do you have another explanation?
2. Your value of validChars="[0-9]*" allows the user to enter an arbitrary number of digits, which is probably not what you want. Use a value of 0-9 to allow only digits (and use the length prop to set a custom length if needed). Still I'm not sure if this is related to the problem since I didn't encounter any issues even when using your value.

I couldn't find any differences in behavior between Safari and Chrome, either.

Btw, what's the purpose of using react-hook-form for this? Seems to me like simply using React state would be way easier for this very simple form.

from react-verification-input.

I just tested with Safari and Chrome on iOS 14.3 which both worked as expected.
So it looks like the problem is more specific.

To investigate I need more information:

• version of package, iOS, etc.
• exact setup (snippet or complete code example)
• what do you mean by "breaks"?
• are you doing/using something "unusual"?

from react-verification-input.

Hello Andreas, thank you for reaching out.

The package version is 2.0.4 and iOS 15.3.1.
The code for Code input is:

const CodeInput: FC<CodeInputProps> = ({ value, onChange }) => {
return (
      <VerificationInput
             value={value}
             onChange={onChange}
             placeholder=""
             classNames={codeStyles}
             validChars="[0-9]*"
             removeDefaultStyles
             autoFocus
       />
}

The action:

 const onChangeValue = (value: string) => {
    setValue(ConfirmCodeField.Code, value);
   // -- I also tried without this part below
    if (value.length === 6) {
      onConfirmCode(value);
    }
   // --  still doesn't work for me
};

const { code = '' } = useWatch<FormInputs>({ control });

Usage:

<CodeInput onChange={onChangeValue} value={code} disabled={isLoading} />

I'm using react-hook-form

The current flow is: Open Safari on iPhone > Login screen > Enter email > Receive SMS > Try autofill the CODE (screenshot below) > It redirects you back to the login screen, without any error message.

from react-verification-input.

Thanks for the information. I'll look into it.

from react-verification-input.

@anurbecirovic Hello anurbecirovic if this issue is resolved with you or not ?

from react-verification-input.

Hello @mohamedomara0. I tried but haven't had luck with it. I left this issue in the app since it wasn't big blocker.

from react-verification-input.