Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Pin input field not working with iOS SMS autocomplete
See original GitHub issue🐛 Bug report
The PinInputs nested within a PinInputField are not correctly set when using the iPhone’s autofill functionality.
This is only happening in Safari. I’ve tested with Edge, Chrome, Opera, Brave, Firefox and Firefox Focus and these all work as expected.
💥 Steps to reproduce
- Receive an SMS message with an OTP
- Navigate to https://chakra-ui.com/docs/form/pin-input#using-fields-as-a-one-time-password-otp
- Select the first pin input
- Click on the available OTP from the keyboard
- Only some inputs will be set
🌍 System information
Chakra UI: Latest 1.6.2 Browser: Mobile Safari iOS (tested in iPhone 8 and iPhone 12) Operating system: Latest 14.2.1
📝 Additional information
https://user-images.githubusercontent.com/3072458/119651245-175d7400-be25-11eb-997b-1ec3ed51aa80.MP4
Issue Analytics
- State:
- Created 2 years ago
- Reactions:7
- Comments:15 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I had the same scene and already did some tests. I think the reason is that iOS Safari fill in the captcha manner is different with Chrome. The Chrome triggers just once “onchange”, but the iOS Safari will quickly (maybe 10ms) trigger multiple times and enter one at a time. The render view about 16ms, so set some value will be not enough fast.
I’m trying to make it right. It’s a live demo. https://codesandbox.io/s/naughty-danny-zp31zr?file=/src/index.tsx
@with-heart I will investigate.