updated paste and backspace logic for OTP Input (#148)

egovernments · Nov 15, 2024 · 38bed33 · 38bed33
1 parent f3282c8
commit 38bed33
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 16 deletions.
diff --git a/react/example/package.json b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.52",
+    "@egovernments/digit-ui-components": "0.0.2-beta.53",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.2-beta.52",
+        "@egovernments/digit-ui-components": "0.0.2-beta.53",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.52",
+    "@egovernments/digit-ui-components": "0.0.2-beta.53",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.52",
+    "@egovernments/digit-ui-components": "0.0.2-beta.53",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -86,7 +86,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.12",
-    "@egovernments/digit-ui-components": "0.0.2-beta.52",
+    "@egovernments/digit-ui-components": "0.0.2-beta.53",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.52",
+  "version": "0.0.2-beta.53",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

diff --git a/react/ui-components/src/atoms/OTPInput.js b/react/ui-components/src/atoms/OTPInput.js
@@ -45,20 +45,19 @@ const OTPInput = ({
   };
 
   const handlePaste = (e) => {
+    e.preventDefault();
     const pastedData = e.clipboardData.getData("text").slice(0, length);
     const newOtp = [...otp];
     let pasteIndex = 0;
     for (let i = 0; i < newOtp.length && pasteIndex < pastedData.length; i++) {
       const char = pastedData[pasteIndex];
 
       if (
-        (type === "numeric" && !isNaN(char)) ||
+        (type === "numeric" && !isNaN(char) && char !== " ") ||
         (type === "alphanumeric" && /^[a-zA-Z0-9]*$/.test(char))
       ) {
-        if (newOtp[i] === "") {
-          newOtp[i] = char;
-          pasteIndex++;
-        }
+        newOtp[i] = char;
+        pasteIndex++;
       }
     }
 
@@ -69,16 +68,22 @@ const OTPInput = ({
       setError(callbackError || null);
     }
 
-    const lastFilledIndex = newOtp.findIndex((char) => char === "");
-    if (lastFilledIndex !== -1) {
-      inputRefs.current[lastFilledIndex].focus();
-    }
+    // Focusing on the next input after the last pasted character
+    const nextIndex = pasteIndex < length ? pasteIndex : length - 1;
+    inputRefs.current[nextIndex].focus();
   };
 
   const handleKeyDown = (e, index) => {
     if (e.key === "Backspace") {
+      e.preventDefault();
       const newOtp = [...otp];
-      newOtp[index] = "";
+
+      // Remove the current value and shift all subsequent values to the left
+      for (let i = index; i < newOtp.length - 1; i++) {
+        newOtp[i] = newOtp[i + 1];
+      }
+      newOtp[newOtp.length - 1] = "";
+
       setOtp(newOtp);
       onChange(newOtp.join(""));
       if (index > 0) {