search

soywod / react-pin-field

📟 React component for entering PIN codes.
https://soywod.github.io/react-pin-field/
MIT License
412 stars 24 forks source link

Pasting code on mobile #52

Closed zakpucci closed 2 years ago

zakpucci commented 2 years ago

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

soywod commented 2 years ago

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?

zakpucci commented 2 years ago

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.

anthtoonaing commented 2 years ago

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.

soywod commented 2 years ago

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?

zakpucci commented 2 years ago

Will add this to my testing as well.

soywod commented 2 years ago

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?

soywod commented 2 years ago

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!

mattiLeBlanc commented 2 years ago

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

https://user-images.githubusercontent.com/5285035/177253115-62a179c0-7b67-4d8f-b1da-04d5468fe899.mp4

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

https://user-images.githubusercontent.com/5285035/177255061-0db84e5f-d824-4a59-8856-55b95e7ae8d1.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.

soywod commented 2 years ago

I see, let's keep one open issue for the problem (https://github.com/soywod/react-pin-field/issues/63). Thanks for the videos, it helps me!

mattiLeBlanc commented 2 years ago

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.

boredland commented 1 year ago

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

https://github.com/soywod/react-pin-field/assets/4662748/3db5a023-a0e3-48af-a88f-848b76bc169a

With mobile chrome, it works well.

soywod commented 1 year ago

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

I was able to reproduce on Firefox mobile as well, I will be able to debug. Thank you!