react-otp-input icon indicating copy to clipboard operation
react-otp-input copied to clipboard

Keyboard layout auto switches from numbers to characters in mobiles.

Open aKshayKadam03 opened this issue 3 years ago • 3 comments

When we try to enter the OTP in mobiles. The keyboard layout auto switches from Number to Characters/Alphabets layout because the OTP component re-renders on every input.

The above issue can be reproduced on the official demo link. i.e https://devfolioco.github.io/react-otp-input/

Steps to reproduce:

  • Open the link in mobile phone.
  • Switch to number keyboard.
  • Add a number
  • The keyboard will switch back to characters/alphabets keyboard layout

Preferred Solution

  • The keyboard layout state should persist.

aKshayKadam03 avatar Dec 28 '21 11:12 aKshayKadam03

Please check the following clip: https://www.loom.com/share/eadc9d07d36a4211b758464a356bc6ba

  • Reproduced on:

    • Phone: Nokia 6.1 plus
    • OS: Android 10
  • Also reproducible on iOS 15.2

aKshayKadam03 avatar Dec 28 '21 13:12 aKshayKadam03

use attribute isInputNum={true}

Kiran636 avatar Feb 24 '22 17:02 Kiran636

https://devfolioco.github.io/react-otp-input/

The OTP has both alphabets and numbers. So can't fix it to just numbers.

aKshayKadam03 avatar Feb 25 '22 06:02 aKshayKadam03

You can now customize the type with the inputType prop in v3.

prateek3255 avatar Mar 25 '23 14:03 prateek3255

does anyone resolved this?

dhanushpani avatar May 18 '23 09:05 dhanushpani