search

devfolioco / react-otp-input

:heavy_check_mark: OTP Input Component for React
http://devfolioco.github.io/react-otp-input
MIT License
654 stars 424 forks source link

keyboard layout is flickering while entering OTP (only on android) #353

Open Govindsa421 opened 2 years ago

Govindsa421 commented 2 years ago

While entering OTP on android devices , the keyboard layout kind of flashes. the same happens while deleting the OTP.

please help me to fix this problem. attaching the resources for the sam

edwin-tandiono commented 2 years ago

Are you using chrome mobile? This seems to happen due to that "password bar" with the key icon that appears there.

From what I understand, the whole document is being re-rendered on input change, and the password bar is not detected immediately on re-render. Once it was detected, the document abruptly shrinks its height. This is what causing the down-up bounce of the input.

The solution that comes to mind:

  1. Make the input independent to document height
  2. Disable the password bar (Not sure how to do this)
  3. Prevent document re-render on change (Not sure how to do this too)
zafar-abba-s-tranzita commented 2 years ago

Having same issue in andriod, please help me to fix this

1496-rajeev commented 2 years ago

facing same issue on android only on chrome browser

umeshiscreative commented 2 years ago

Facing same issue on iOS device with safari browser.

IamSAL commented 1 year ago

Facing same issue, it looks keyboard looses focus and quickly refocus on every keystroke.

chincodes commented 1 year ago

I found this issue while testing on android phone in chrome browser . Working fine on desktop browsers.

prateek3255 commented 1 year ago

Can you add a screenshot/video for reference?

BoraVivek-Furrl commented 3 weeks ago

Any update on this? This is causing un-expected behavior wherein my Continue button is getting hidden due to that Password bar which comes after few split seconds of keyboard getting rendered.