From b3b973bd59567716a5634a29f2dfb1a9b64bdd88 Mon Sep 17 00:00:00 2001
From: Prateek Surana <prateeksurana3255@gmail.com>
Date: Sun, 23 Jul 2023 01:31:10 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20=20Fix=20paste=20not=20working?=
 =?UTF-8?q?=20for=20number=20inputs=20(#407)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :ambulance: Remove unnecessary condition from onKeyDown

* :memo: Udpate documentation
---
 README.md           |  2 ++
 example/src/App.tsx |  1 +
 package.json        |  2 +-
 src/index.tsx       | 17 +++++++++++++----
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 45363380..a49d9383 100644
--- a/README.md
+++ b/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
 
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 9fd11d72..b08cce12 100644
--- a/example/src/App.tsx
+++ b/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">
diff --git a/package.json b/package.json
index 3dfbae5c..73635e1f 100644
--- a/package.json
+++ b/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",
diff --git a/src/index.tsx b/src/index.tsx
index de05ad68..ca66b173 100644
--- a/src/index.tsx
+++ b/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
           )}