Fix number input accepting characters in Firefox (#396)

* 🐛 Avoid inputting fields other than number for number inputs

* 📝 Add override prop warning in readme

* 🔖 v3.0.2

README.md

@@ -131,6 +131,17 @@ export default function App() {
   </tr>
 </table>
 
+### ⚠️ Warning
+Do not override the following props on the input component that you return from the `renderInput` prop. Doing so might lead to unexpected behaviour.
+- `ref`
+- `value`
+- `onChange`
+- `onFocus`
+- `onBlur`
+- `onKeyDown`
+- `onPaste`
+- `type`
+
 ## Migrating from v2
 
 The v3 of `react-otp-input` is a complete rewrite of the library. Apart from making the API more customizable and flexible, this version is a complete rewrite of the library using TypeScript and React Hooks. Here are the breaking changes that you need to be aware of:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-otp-input",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A fully customizable, one-time password input component for the web built with React",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

src/index.tsx

@@ -151,6 +151,8 @@ const OTPInput = ({
       event.code === 'ArrowDown'
     ) {
       event.preventDefault();
+    } else if (isInputNum && !isInputValueValid(event.key)) {
+      event.preventDefault();
     }
   };