react-otp-input Pasting from clipboard on Android

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

https://user-images.githubusercontent.com/8410389/114436022-de2db500-9b92-11eb-9b6a-45bf0624ebcd.mp4

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

Apr 12 '21 17:04 es1831

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.

May 06 '21 14:05 AzurDrive

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

May 19 '21 10:05 DeadEnglish

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

May 20 '21 06:05 Janviba911

@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.

May 20 '21 08:05 AzurDrive

@AzurDrive can you share the code?