devfolioco / react-otp-input

:heavy_check_mark: OTP Input Component for React

Home Page:http://devfolioco.github.io/react-otp-input

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Govindsa421 opened this issue · 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

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)

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

facing same issue on android only on chrome browser

Facing same issue on iOS device with safari browser.

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

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

Can you add a screenshot/video for reference?