Pasting from clipboard on Android

[es1831]

• Describe the Feature Request
  Having an issue pasting a code from clipboard on android

screen-20210412-132430.mp4

• Describe Preferred Solution
  should behave the same as pasting, where the numbers are auto-filled once you click on the number

[AzurDrive]

Hello!

Any updates on this?
Cause same problems for iOS / Android auto-paste from SMS - code is not being parsed correctly and only first number is pasted.

[DeadEnglish]

Also running into this issue on Android, pasting from clipboard works but pasting from sms messages doesn't.

[Janviba911]

I am facing same issue which was posted by @AzurDrive, Please give a solution as soon as possible @ajayns, @apollonian

[AzurDrive]

@DeadEnglish @Janviba911 yo guys, i can share my "hack" and overall thoughts on this library.
So, you see, ths component renders 4 separate inputs, 1st input is auto-focused (default), and when you try to paste code from sms, it is pasted in this 1st input, but only 1st digit, cause maxLength is 1.
Then all the rest logic - proceed inputing to other 3 inputs - doesnt work here like with pasting from clipboard.
Because code got pasted directly to rendered input, not to React OTP component (somehow).

So my solution.
Make on top of react-otp (place them in one container). Input should be numeric-based, maxLength 4, autofocused, controllable. color and background are transparent.
also set react-otp to pointerEvents: none. Share the contolled input to react.state and pass that value to react-otp component too.
all the rest styles are on yours.

[LuisValgoi]

@AzurDrive can you share the code?

[dariohirsch]

Hi! any update on this issue? Im facing the same problem. Thanks!!

[prateek3255]

@es1831 Can you check if this issue still exists with v3.

[chocodate]

It works for ios safari but such a screen appears. When I hit close it copies all the code. Could the console be forgotten somewhere?

[hogiyogi597]

I believe I have a fix for this in this PR here: #428

[prateek3255]

This was fixed with #428