react-otp-input icon indicating copy to clipboard operation
react-otp-input copied to clipboard
verified publisher icon devfolioco

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

Open Govindsa421 opened this issue 3 years ago • 8 comments

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

Govindsa421 avatar Jul 20 '22 06:07 Govindsa421

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)

edwin-tandiono avatar Jul 21 '22 03:07 edwin-tandiono

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

zafar-abba-s-tranzita avatar Jul 24 '22 07:07 zafar-abba-s-tranzita

facing same issue on android only on chrome browser

1496-rajeev avatar Aug 06 '22 07:08 1496-rajeev

Facing same issue on iOS device with safari browser.

umeshiscreative avatar Aug 10 '22 07:08 umeshiscreative

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

IamSAL avatar Sep 19 '22 17:09 IamSAL

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

chincodes avatar Oct 13 '22 09:10 chincodes

Can you add a screenshot/video for reference?

prateek3255 avatar Mar 25 '23 14:03 prateek3255