Iphone Safari browser does not show typed numbers in OTP input fields.

[ovbutt]

• Steps to reproduce the issue:

1. Open website in Iphones Safari browser
2. Try entering numbers in input fields
3. The fields will take the input but will not show the value in fields.

• Relevant error messages and/or screenshots:

[svota]

I'm having this same problem. It is appearing for me on iphones 7, 8, and my ipad in Chrome and Safari.

[josephtesla]

I am also experiencing this issue. pls help

[ovbutt]

@josephtesla @svota One workaround can be you can decrease the font size in case of safari mobile web. This is what I did and it worked for me

[manjariParthiban]

@josephtesla setting 'padding:0' in inputStyle prop works

[ritikbanger]

The feature is available in: https://www.npmjs.com/package/react18-input-otp

[praty22]

Setting padding:0 works, But then how to apply padding styles on input?

[praty22]

Setting padding:0 works, But then how to apply padding styles on input?

width: 49px !important; height: 46px; padding: 0

Found a workaround! This will help to provide the custom design to inputs without giving padding, Padding needs to be kept at 0 otherwise the number does not appear. This is a bug I guess.

[prateek3255]

You can now fully customize the input elements with v3

[Madanraj1]

padding: 0

yeah this worked