Pasting code on IOS Chrome not working from Message

[mattiLeBlanc]

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

The problem mentioned in the issues below is still actual in version 3.0.15. I have posted videos in both stories.

We have a react app using the latest version and it doesn't allow quick paste from IOS Message into the box, it only fills the first box with one number.

https://github.com/soywod/react-pin-field/issues/52

[soywod]

Hi, thank you for the video it helps me to understand the issue. It looks like when you "paste" the code only the first character is added, right? My main problem is I do not have an iOS, I cannot debug this properly.

From your videos, where does the code come from? A SMS? If it is not a sensitive one, could you share it?

[mattiLeBlanc]

Hi, Yes the code is coming from an OTP sms. It only pastes in the first box.

[soywod]

I was able to reproduce again with this same setup https://github.com/soywod/react-pin-field/issues/28#issuecomment-803283478. Only the first char is added. I remember to have fixed this in a previous release, it looks like a regression. I will check this ASAP!

[mattiLeBlanc]

@soywod if you could release a new version, I am happy to test it for you. It would spare me moving to another library.

[soywod]

The bug should be fixed, I just released the v3.0.16. Feel free to reopen if the issue persists!

[mattiLeBlanc]

Hi, close but not cigar :)

https://user-images.githubusercontent.com/5285035/177428778-62d33c78-3b22-40b7-9834-027b9abb3ca4.mp4

It now pastes the whole number in the first field but doesn't spread it out, on IOS Chrome. Works fine still for IOS Safari.

[soywod]

Damn it, I was really sure this time xD when I use the autocomplete mode it does spread, I do not know how to reproduce this behaviour on Android. I will investigate and let you know!

[mattiLeBlanc]

I hope you can fix the spread, so we can keep using your library. Thanks for your help!

[soywod]

I will, I just need to find some free time to do it :wink:

[mattiLeBlanc]

Any update on this issue?

[soywod]

As I said, I need free time to do it. This is an open source project, I'm not paid for it (unfortunately). If your really need this bug to be fixed quickly according to your deadlines I encourage you either to send a pull request (you know how to reproduce the bug, so it should be easy for your to debug and potentially fix it) or to support me with a donation (which would allow me to allocate time for it).

[mattiLeBlanc]

Okay, I will move to a different library then because I had a look at the code and I have no context of how it works. I couldn't find the event triggering on an ios OTP code auto complete. I have no time to debug your code unfortunately.

[trntv]

28 (comment)

Hi, it's easily reproducible on Android. Just send yourself and SMS with the code and try to paste it from the suggestion provided by the keyboard

[soywod]

I tried on 2 Android phones and I get no suggestion coming from SMS unfortunately :disappointed: so I still cannot reproduce this bug

[ssijak]

@soywod The issue is that OTP pasting from the phone keyboard (suggested value coming from SMS) does not trigger onPaste event. It is actually typing the code. But an additional issue is that onKeyDown key is Unknown, so I am not sure how to properly adjust your code taking that into account.

You can test this by having pin input with autoComplete="one-time-code" prop. And then open the page with the pin input on screen, and send SMS message to that phone which mention code explicitly, like : Your OTP code is: 1234

[soywod]

You can test this by having pin input with autoComplete="one-time-code" prop.

This definitely helped me. I also needed to download a keyboard like Gboard to see OTP being proposed (finally). But I still cannot reproduce the issue: the code is pasted correctly :slightly_frowning_face:

I added autoComplete="one-time-code" on the first pin field of the demo website, feel free to try again. I'm closing the issue since I cannot reproduce since a long time. If someone is able to reproduce, please reopen this issue and give as much information as possible (lib version, OS, browser etc).

[benmotyka2]

I can confirm this issue still exists. Lib version 3.1.3

I'm creating a WebView mobile app, and I'm using react-pin-field input as:

<Input
        ref={ref}
        validate={validateRegex}
        length={length}
        onChange={onChange}
        className={classNames({
          success: state === "success",
          error: state === "error",
        })}
        inputMode="numeric" // for IOS
        type="number" // for Android
        min="0"
      />

Everything works perfectly on Web and Android. However when it comes to iOS, everything works great except for pasting code directly from SMS using iOS keyboard. If you paste text normally it works fine, however if you click "From messages ..." button it enters the whole code to one field. I tested this issue on many iOS devices running iOS 16 (20A362), iOS 15 and the issue still persists. It's difficult to debug, because you have to send many SMS codes.

[benmotyka2]

I believe this issue is strictly connected to this answer: https://stackoverflow.com/a/73757650

meaning when you paste "From messages ..." on iOS keyboard the pasteReducer is not triggered. I will try to test it by myself when I find some free time.

[soywod]

I believe this issue is strictly connected to this answer: https://stackoverflow.com/a/73757650

I am not sure, because the OTP paste works on Android, it looks like an iOS specific issue.

I will try to test it by myself when I find some free time.

Could be so great, because I do not have any iOS at home which prevents me to debug the issue. Let me know!

[ssijak]

In my app, in the end, I implemented PIN input like only 1 input field, with mono-spaced numbers inside it and large letter spacing and drew fake boxes behind it to give the impression it has X number of digit inputs. It works like a charm with very minimal JS hacking and special cases and it being just one input and not having this focus and input switch shenanigans it works in all scenarios of typing, pasting, auto-complete, etc.

[benmotyka2]

I am not sure, because the OTP paste works on Android, it looks like an iOS specific issue.

I can confirm it works properly on Android, the issue exists only for iOS. The same functionality doesn't work.

[soywod]

In my app, in the end, I implemented PIN input like only 1 input field, with mono-spaced numbers inside it and large letter spacing and drew fake boxes behind it to give the impression it has X number of digit inputs.

It is a very good idea! It is true that you get rid of all the problems we encounter now. I will experiment with this idea and see how it behaves compared to the existing implementation. Thank you!

[benmotyka]

hi @mattiLeBlanc do you have any simple way to have the code on iOS device keyboard, beside sending an actual SMS?

[mattiLeBlanc]

@benmotyka Do you mean 'have the code' to simulate receiving it and pasting it in the boxes? Not sure how to simulate inputting the code via the IOS keyboard, perhaps a quick google will give you some suggestions? Sorry for not being helpful.