Closed markni closed 1 year ago
I experience the same issue on Android 12
After some debugging:
potential solution would be remove maxlength, and when onInput target value has length >1, trigger the same slice and split logic of the onPaste event.
I am still experiencing the issue. does anyone have a solution for it? Thanks!
@tomery11 don't think this repo is actively maintained, you could try the change I linked in the fork above and just use the modified file directly in your projects.
After some debugging:
- Chrome on iOS does not fire "onPaste" event when using SMS autofill
- all codes are set by a single "onInput" event, but since the input field has attribute "maxLength=1", only the first code is saved.
potential solution would be remove maxlength, and when onInput target value has length >1, trigger the same slice and split logic of the onPaste event.
worked for me thanks
The feature is available in: https://www.npmjs.com/package/react18-input-otp
@ritikbanger I am currently working on React v17 code. So, my question is if I can use the above module which means the react18-input-otp.
@antondev22 The codebase supports every version up to React 18.1. It will work well. Let me know if you face any issue.
@ritikbanger Works well. However on iOS chrome when you click on the OTP that pops up above the keyboard it only pastes the 1st digit in the otp box. The same issue mentioned in this post. Can you please help?
@ritikbanger Works well. However on iOS chrome when you click on the OTP that pops up above the keyboard it only pastes the 1st digit in the otp box. The same issue mentioned in this post. Can you please help?
Fixed in the latest version.
@ritikbanger Works well. However on iOS chrome when you click on the OTP that pops up above the keyboard it only pastes the 1st digit in the otp box. The same issue mentioned in this post. Can you please help?
Fixed in the latest version.
I've just tested the demo site devfolioco.github.io/react-otp-input on Chrome browser on iOS 15.5. The issue is still there.
@vuau The demo for React18-input-otp is here: Codesandbox
I am talking about the new package: https://www.npmjs.com/package/react18-input-otp
I tested your codesandbox url as well and the result is still the same. Only first number is pasted, the rest is blank. https://user-images.githubusercontent.com/259848/185302801-043f4eaa-180f-4d47-8a95-a2f98766e9bf.MOV
Please try again. The sandbox was pointing to an older version, I have updated it. @vuau
Please try again. The sandbox was pointing to an older version, I have updated it. @vuau
Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?
Please try again. The sandbox was pointing to an older version, I have updated it. @vuau
Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?
Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: https://github.com/ritikbanger/react18-input-otp/commit/60d10af5515eb6485cca75158c6feaa3d1314e26
If it has solved your issue, please star the package.
Please try again. The sandbox was pointing to an older version, I have updated it. @vuau
Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?
Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: ritikbanger/react18-input-otp@60d10af
If it has solved your issue, please star the package.
But react18-input-otp doesn't has resend OTP feature like otp-input-react. And in OTP-input-react, I am still having problems while pasting the OTP in IOS, only the first digit is copying
Please try again. The sandbox was pointing to an older version, I have updated it. @vuau
Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?
Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: ritikbanger/react18-input-otp@60d10af If it has solved your issue, please star the package.
But react18-input-otp doesn't has resend OTP feature like otp-input-react. And in OTP-input-react, I am still having problems while pasting the OTP in IOS, only the first digit is copying
Please create another button to re-send the OTP. Simply add a button and hit the resend OTP API onClick. This feature has nothing to do with taking the OTP as input,
@mnshsingh2011
We are also facing the same issue in chrome browser. Any solution will be appreciated.
@Rutvij07 Please move to this package: https://www.npmjs.com/package/react18-input-otp
@ritikbanger can't we do without package ? This issue is also coming in our react native webview for IOS device.
@Rutvij07 the package has handle all the edge cases, if you wish to do it without package, try your own implementation.
Though the minzipped size of the package is just 3.6kb. Remove your current otp package and install this: https://www.npmjs.com/package/react18-input-otp
You only need to change the imports, other code things would remain the same. Pretty small refactors.
I read the logic from react18-input-otp repo and added this code rather than installing whole module. It worked for me.
Assume
otp = 1234
numInputs = 4
Reference - https://github.com/ritikbanger/react18-input-otp/blob/main/src/demo/index.jsx
Thanks @ritikbanger
@Rutvij07 There are over 60 open issues with the current package, I would recommend to move from it to a better one.
@markni Can you check if this issue still exists with v3 and reopen again if it does?
Having this issue in 3.0.2 @prateek3255
Can we have the fix similar to V3 as below, @prateek3255 ? Commit Link
i am facing the same issue and not solved yet
Issue seems to be resolved in 3.1.1, please update the version
Please try again. The sandbox was pointing to an older version, I have updated it. @vuau
Thx. It worked this time. Btw do you know which PR/commit has been made to fix this issue?
Please install: https://www.npmjs.com/package/react18-input-otp Latest version v1.1.0 has this as fixed. Repo: https://github.com/ritikbanger/react18-input-otp Fix Commit: ritikbanger/react18-input-otp@60d10af If it has solved your issue, please star the package.
But react18-input-otp doesn't has resend OTP feature like otp-input-react. And in OTP-input-react, I am still having problems while pasting the OTP in IOS, only the first digit is copying
yeah it's working with react18-input-otp, but the keyboard isn't open by default for IOS even i gave shouldAutoFocus. Do you have any solution for that?
System used:
Steps to reproduce the issue: