Closed l3ikrant closed 1 year ago
I am not able to reproduce this @l3ikrant can you add a video demo, on how you did it?
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?
Right! I did testing with other browsers like Chrome and brave, and it is working fine. The issue persists only with Firefox Web Browser.
Okay, would you like to work on a fix for this issue?
@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',
];
@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.
Steps to reproduce the issue:
Start typing characters
Screenshot:![2023-04-10_19-02](https://user-images.githubusercontent.com/7446485/230908776-c41c9539-29d0-4acf-affe-a2685bb73395.png)