Merge branch 'main' of https://github.com/ritikbanger/react18-input-otp…

… into main
ritikbanger · Nov 30, 2022 · 5efb0dd · 5efb0dd
2 parents bcb48b6 + e1ca609
commit 5efb0dd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # react18-input-otp
 
-[![npm version](https://badge.fury.io/js/react18-input-otp.svg)](https://badge.fury.io/js/react18-input-otp) [![npm](https://img.shields.io/npm/dw/react18-input-otp.svg?logo=npm)](https://www.npmjs.com/package/react18-input-otp) [![npm](https://img.shields.io/bundlephobia/minzip/react18-input-otp)](https://www.npmjs.com/package/react18-input-otp)
+[![npm version](https://badge.fury.io/js/react18-input-otp.svg)](https://badge.fury.io/js/react18-input-otp) [![npm](https://img.shields.io/npm/dm/react18-input-otp.svg?logo=npm)](https://www.npmjs.com/package/react18-input-otp) [![npm](https://img.shields.io/bundlephobia/minzip/react18-input-otp)](https://www.npmjs.com/package/react18-input-otp)
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 

diff --git a/lib/index.js b/lib/index.js
diff --git a/package.json b/package.json
@@ -24,8 +24,8 @@
     "component"
   ],
   "peerDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "16.2.0 - 18",
+    "react-dom": "16.2.0 - 18"
   },
   "typings": "typings/index.d.ts",
   "devDependencies": {

diff --git a/src/lib/index.jsx b/src/lib/index.jsx
@@ -249,12 +249,26 @@ class OtpInput extends Component {
     }
   };
 
+  //If the OTP value at focused input exists, it gets changed; else, the previous input is focused.
+  focusPrevInputAndChangeCode = (value) => {
+    const { activeInput } = this.state;
+    const otp = this.getOtpValue();
+    if (otp[activeInput] != value[0]) {
+      otp[activeInput] = value[0];
+      if (otp[activeInput + 1] != value[0]) {
+        this.focusInput(otp.length - 1);
+      }
+    } else {
+      this.focusInput(activeInput - 1);
+    }
+    this.handleOtpChange(otp);
+  };
+
   // Handle cases of backspace, delete, left arrow, right arrow, space
   handleOnKeyDown = (e) => {
     if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
       e.preventDefault();
-      this.changeCodeAtFocus('');
-      this.focusPrevInput();
+      this.focusPrevInputAndChangeCode('');
     } else if (e.keyCode === DELETE || e.key === 'Delete') {
       e.preventDefault();
       this.changeCodeAtFocus('');
@@ -268,8 +282,6 @@ class OtpInput extends Component {
       e.preventDefault();
     } else if (e.keyCode === ENTER || e.key === 'Enter') {
       this.props.onSubmit();
-    } else {
-      this.changeCodeAtFocus('');
     }
   };