soywod / react-pin-field

đź“ź React component for entering PIN codes.

Home Page:https://soywod.github.io/react-pin-field/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pasting code on mobile

zakpucci opened this issue · comments

When a value is pasted, it will paste entirely into the field that is focused rather than attempt to fill in one character at a time until the fields are all filled.

Is this intentional? Should it be pasting into all of the fields?

Version 2.0.0-beta.2
Device: iPhone 11
Browser: Safari

Is this intentional? Should it be pasting into all of the fields?

No it is not, it should paste by spreading the content in all available fields. I don't owe an iPhone so it's gonna be hard to reproduce. Although, it works well on my Android + Firefox/Chrome. How do you paste the code? By long pressing or by using the paste button from the keyboard? Could you try on Firefox and/or Chrome to see if it comes from Safari?

I'll test this further. On an iPhone, when a 6 digit code is sent to you in a text, the iPhone recognizes it as a pin code and offers to fill it in, basically a quick paste. If you're focused on the first field in the pin code set, the entire 6 digit code pastes into that first field.

I'll test this with a regular paste, not using the Apple "quick paste" and see if it makes a difference.

I'll check Chrome on iPhone as well. Will test on an Apple iPad as well, I assume we'll see the same issue there.

I am encountering the same issue. The issue occurs when I do Auto Fill SMS OTP on iPhone. It is not normal cut and paste operation.

Could you activate the debug mode (you just need to add the prop debug) and see in the console what happens when you trigger this Auto Fill?

Will add this to my testing as well.

The native web component was a big mistake, it led to so many issues… I ended up rolling back to v1 state, without web component (pure React implementation). Could you try with the v3.0.11 and see if the issue is still there?

I was not able to reproduce the bug at all, maybe the last version fixed it. If someone is able to reproduce it, feel free to reopen the issue!

I am still having this issue on IOS Chrome and IOS webview with version 3.0.15.

Jul-05-2022.15-02-32.mp4

Also used the example, same issue on Chrome on IOS:

Jul-05-2022.15-20-50.mp4

@soywod How can we resolve this? This is blocking our production release and I need to decide if we have to move away from this package or not.

I see, let's keep one open issue for the problem (#63). Thanks for the videos, it helps me!

Yes, the code is coming from an SMS. It works for Safari on IOS but not on Chrome. Also doesn't work for Webview in a Swift app.

I am getting the "everything in first field" issue with mobile Firefox on Android using the Gboard paste function:

screen-20230801-233053.mp4

With mobile chrome, it works well.