Input field accepts multiple characters in single field for inputType number.

[l3ikrant]

Steps to reproduce the issue:

• Navigate to live demo url (https://devfolioco.github.io/react-otp-input/)
• Change inputType to number

• Start typing characters

  Screenshot:

[prateek3255]

I am not able to reproduce this @l3ikrant can you add a video demo, on how you did it?

[l3ikrant]

Video Link https://www.awesomescreenshot.com/video/16380479?key=380150336acb2a5f625ce75e7f034e3f

[prateek3255]

That shouldn't be happening because we change the input type to number and it doesn't allow non numeric inputs. Can you also add which browser you are using here?

[l3ikrant]

Right! I did testing with other browsers like Chrome and brave, and it is working fine. The issue persists only with Firefox Web Browser.

[prateek3255]

Okay, would you like to work on a fix for this issue?

[bVatsaL]

@l3ikrant @prateek3255 I have the same issue and it can be resolved by adding onKeyDown function to our own input with the validation below.

<OtpInput
    value={otp}
    onChange={setOtp}
    numInputs={4}
    inputType="number"
    renderInput={(props) => (
      <input
        {...props}
        onKeyDown={handleKeyDown}
      />
    )}
  />

const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
    if (isNaN(+e.key) && !VALID_KEYS.includes(e.key)) {
      e.preventDefault();
    }
  };

const VALID_KEYS = [
  'Backspace',
  'Enter',
  'ArrowDown',
  'ArrowUp',
  'ArrowLeft',
  'ArrowRight',
  'Shift',
  'Tab',
];

[prateek3255]

@l3ikrant @bVatsaL This issue has been fixed with v3.0.2. On a sidenote @bVatsaL you should not override props like onKeyDown this will lead to unexpected behaviours with the OTP input, as a caution I have also added a warning section in the README, specifying which props you should not override.