Autofill OTP from SMS does not work properly in iOS Chrome

[markni]

• System used:

  • iOS: 15.1.1
  • Chrome: 96.0.4664.53

• Steps to reproduce the issue:

1. open react-otp-input demo in iOS Chrome
2. send yourself an OTP code via SMS
3. once received the code, tap on 1st input box and tap "From Messages 123456" on top of the keyboard
4. only 1 digit of the 6 digits code has been copied. The OTP input focused on the second input box.

note:

• this works flawlessly on mobile safari on the same system
• manual copy paste also works fine
• setting "isInputNum" to true does not fix the problem
• read more about auto fill from sms on ios

• Relevant error messages and/or screenshots:

[dsmalicsi]

I experience the same issue on Android 12

[markni]

After some debugging:

• Chrome on iOS does not fire "onPaste" event when using SMS autofill
• all codes are set by a single "onInput" event, but since the input field has attribute "maxLength=1", only the first code is saved.

potential solution would be remove maxlength, and when onInput target value has length >1, trigger the same slice and split logic of the onPaste event.

[tomery11]

I am still experiencing the issue. does anyone have a solution for it? Thanks!

[markni]

@tomery11 don't think this repo is actively maintained, you could try the change I linked in the fork above and just use the modified file directly in your projects.

[kwanso-ahsaanShuja]

After some debugging:

• Chrome on iOS does not fire "onPaste" event when using SMS autofill
• all codes are set by a single "onInput" event, but since the input field has attribute "maxLength=1", only the first code is saved.

potential solution would be remove maxlength, and when onInput target value has length >1, trigger the same slice and split logic of the onPaste event.

worked for me thanks

[ritikbanger]

The feature is available in: https://www.npmjs.com/package/react18-input-otp

[yosuke1015]

@ritikbanger I am currently working on React v17 code. So, my question is if I can use the above module which means the react18-input-otp.

[ritikbanger]

@antondev22 The codebase supports every version up to React 18.1. It will work well. Let me know if you face any issue.

[abhisheksarwan]

@ritikbanger Works well. However on iOS chrome when you click on the OTP that pops up above the keyboard it only pastes the 1st digit in the otp box. The same issue mentioned in this post. Can you please help?

[ritikbanger]

@ritikbanger Works well. However on iOS chrome when you click on the OTP that pops up above the keyboard it only pastes the 1st digit in the otp box. The same issue mentioned in this post. Can you please help?

Fixed in the latest version.

[vuau]

@ritikbanger Works well. However on iOS chrome when you click on the OTP that pops up above the keyboard it only pastes the 1st digit in the otp box. The same issue mentioned in this post. Can you please help?

Fixed in the latest version.

I've just tested the demo site devfolioco.github.io/react-otp-input on Chrome browser on iOS 15.5. The issue is still there.

[ritikbanger]

@vuau The demo for React18-input-otp is here: Codesandbox

I am talking about the new package: https://www.npmjs.com/package/react18-input-otp

[vuau]

I tested your codesandbox url as well and the result is still the same. Only first number is pasted, the rest is blank. https://user-images.githubusercontent.com/259848/185302801-043f4eaa-180f-4d47-8a95-a2f98766e9bf.MOV

[ritikbanger]

Please try again. The sandbox was pointing to an older version, I have updated it. @vuau

[vuau]

Please try again. The sandbox was pointing to an older version, I have updated it. @vuau

Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?

[ritikbanger]

Please try again. The sandbox was pointing to an older version, I have updated it. @vuau

Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?

Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: https://github.com/ritikbanger/react18-input-otp/commit/60d10af5515eb6485cca75158c6feaa3d1314e26

If it has solved your issue, please star the package.

[mnshsingh2011]

Please try again. The sandbox was pointing to an older version, I have updated it. @vuau

Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?

Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: ritikbanger/react18-input-otp@60d10af

If it has solved your issue, please star the package.

But react18-input-otp doesn't has resend OTP feature like otp-input-react. And in OTP-input-react, I am still having problems while pasting the OTP in IOS, only the first digit is copying

[ritikbanger]

Please try again. The sandbox was pointing to an older version, I have updated it. @vuau

Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?

Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: ritikbanger/react18-input-otp@60d10af If it has solved your issue, please star the package.

But react18-input-otp doesn't has resend OTP feature like otp-input-react. And in OTP-input-react, I am still having problems while pasting the OTP in IOS, only the first digit is copying

Please create another button to re-send the OTP. Simply add a button and hit the resend OTP API onClick. This feature has nothing to do with taking the OTP as input,

@mnshsingh2011

[Rutvij07]

We are also facing the same issue in chrome browser. Any solution will be appreciated.

[ritikbanger]

@Rutvij07 Please move to this package: https://www.npmjs.com/package/react18-input-otp

[Rutvij07]

@ritikbanger can't we do without package ? This issue is also coming in our react native webview for IOS device.

[ritikbanger]

@Rutvij07 the package has handle all the edge cases, if you wish to do it without package, try your own implementation.

Though the minzipped size of the package is just 3.6kb. Remove your current otp package and install this: https://www.npmjs.com/package/react18-input-otp

You only need to change the imports, other code things would remain the same. Pretty small refactors.

[Rutvij07]

I read the logic from react18-input-otp repo and added this code rather than installing whole module. It worked for me.

Assume

otp = 1234 numInputs = 4

Reference - https://github.com/ritikbanger/react18-input-otp/blob/main/src/demo/index.jsx

Thanks @ritikbanger

[ritikbanger]

@Rutvij07 There are over 60 open issues with the current package, I would recommend to move from it to a better one.

[prateek3255]

@markni Can you check if this issue still exists with v3 and reopen again if it does?

[Ryanjso]

Having this issue in 3.0.2 @prateek3255

[Datta-Telukunta]

Can we have the fix similar to V3 as below, @prateek3255 ? Commit Link

[spankaj13579]

i am facing the same issue and not solved yet

[Kushagraagarwal]

Issue seems to be resolved in 3.1.1, please update the version

[abineshr64]

Please try again. The sandbox was pointing to an older version, I have updated it. @vuau

Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?

Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: ritikbanger/react18-input-otp@60d10af If it has solved your issue, please star the package.

But react18-input-otp doesn't has resend OTP feature like otp-input-react. And in OTP-input-react, I am still having problems while pasting the OTP in IOS, only the first digit is copying

yeah it's working with react18-input-otp, but the keyboard isn't open by default for IOS even i gave shouldAutoFocus. Do you have any solution for that?