Pasting from clipboard on Android

devfolioco / react-otp-input

:heavy_check_mark: OTP Input Component for React

http://devfolioco.github.io/react-otp-input

MIT License

657 stars 427 forks source link

Pasting from clipboard on Android #280

Closed es1831 closed 9 months ago

es1831 commented 3 years ago

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

AzurDrive commented 3 years ago

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 commented 3 years ago

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

Janviba911 commented 3 years ago

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

AzurDrive commented 3 years ago

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