Autocomplete one-time-code not working on Chrome

[Rty-i4]

Hi, Safari works without any issues. However, in Chrome, when passing one-time-code, it fills only the first number and leaves the rest empty.

[drac94]

Hi @Rty-i4 I was able to reproduce the issue, I'll be checking it this week, I just hope to find an easy way to test it 😅

[drac94]

After reviewing this I realized chrome is not firing the onPaste event when filling the input using an SMS, I tried to find a quick fix but until now I haven't had luck, it seems like this will need a more significant effort to be solved 😞

[Prasannsitani]

@drac94 Hey brother, have you find any solution for that? If yes, would you mind sharing it with me? I will be highly appreciate it.

[n1arash]

Do you have any updates or ideas on how to fix this? I will appreciate it so much.

[drac94]

Sorry all, I haven't had time to work on this, I'll try to allocate some time next week, also PR's are welcomed

[n1arash]

hi dear @drac94 hope you doing well adding onInput handler to input with basically pasteHandler code fixed pasting issue with phone keyboards:

    const handleOnInput = (event: ChangeEvent<HTMLInputElement>) => {
      if (!event.target.value) return;
      const {
        target: { value },
      } = event;
      let currentInput = 0;

      if (event.target.value && event.target.value.length === length) {
        for (let i = 0; i < value.length; i++) {
          const pastedCharacter = value.charAt(i);
          if (pastedCharacter.match(inputProps.pattern)) {
            inputsRef.current[currentInput].value = pastedCharacter;
            if (inputsRef.current[currentInput].nextElementSibling !== null) {
              (
                inputsRef.current[currentInput]
                  .nextElementSibling as HTMLInputElement
              ).focus();
              currentInput++;
            }
          }
        }
        sendResult();
      }
    };

I will make a PR soon for it

EDIT: you must remove maxLength props to use this handler function

[Sandy-Garrido]

Also having this issue - noticed the same, onPaste not firing. Looks like @n1arash may have a solution though. Thanks :)

[n1arash]

@Sandy-Garrido hello, the onPaste problem is because the phone keyboard pasting functionality doesn't paste on the input it simulates the user typing on inputs and filling each input manually, onInput event handles all kinds of changes on input (pasting/typing, etc...)

[drac94]

EDIT: you must remove maxLength props to use this handler function

@n1arash could removing maxLength affect something else?

Also I'm thinking on how could we easily test this 🤔 right now I am doing it manually

[michalm55]

@drac94 What is the status of fixing it?

[AliaksandrKazerski]

Hi all. Created pull request with @n1arash solution: https://github.com/drac94/react-auth-code-input/pull/66