🚑 Fix paste not working for number inputs (#407)

* 🚑 Remove unnecessary condition from onKeyDown

* 📝 Udpate documentation

README.md

@@ -140,7 +140,9 @@ Do not override the following props on the input component that you return from
 - `onBlur`
 - `onKeyDown`
 - `onPaste`
+- `onInput`
 - `type`
+- `inputMode`
 
 ## Migrating from v2
 

example/src/App.tsx

@@ -95,6 +95,7 @@ function App() {
             <option value="text">text</option>
             <option value="number">number</option>
             <option value="password">password</option>
+            <option value="tel">tel</option>
           </select>
         </div>
         <div className="side-bar__segment side-bar__segment--bottom">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-otp-input",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "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

@@ -15,6 +15,8 @@ type InputProps = Required<
     | 'maxLength'
     | 'autoComplete'
     | 'style'
+    | 'inputMode'
+    | 'onInput'
   > & {
     ref: React.RefCallback<HTMLInputElement>;
     placeholder: string | undefined;
@@ -101,8 +103,12 @@ const OTPInput = ({
     if (isInputValueValid(value)) {
       changeCodeAtFocus(value);
       focusInput(activeInput + 1);
-    } else {
-      const { nativeEvent } = event;
+    }
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { nativeEvent } = event;
+    if (!isInputValueValid(event.target.value)) {
       // @ts-expect-error - This was added previosly to handle and edge case
       // for dealing with keyCode "229 Unidentified" on Android. Check if this is
       // still needed.
@@ -111,6 +117,9 @@ const OTPInput = ({
         changeCodeAtFocus('');
         focusInput(activeInput - 1);
       }
+      // Clear the input if it's not valid value because firefox allows
+      // pasting non-numeric characters in a number type input
+      event.target.value = '';
     }
   };
 
@@ -151,8 +160,6 @@ const OTPInput = ({
       event.code === 'ArrowDown'
     ) {
       event.preventDefault();
-    } else if (isInputNum && !isInputValueValid(event.key)) {
-      event.preventDefault();
     }
   };
 
@@ -232,6 +239,8 @@ const OTPInput = ({
               ),
               className: typeof inputStyle === 'string' ? inputStyle : undefined,
               type: inputType,
+              inputMode: isInputNum ? 'numeric' : 'text',
+              onInput: handleInputChange,
             },
             index
           )}