From a49f3c85ec83c5ebb2f9c30cc571ba6bdab84dfa Mon Sep 17 00:00:00 2001
From: pvsameerpvs <pvsameerpvs@gmail.com>
Date: Mon, 29 Jan 2024 14:01:53 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20varification:=20=E2=80=98Verify=20OTP?=
 =?UTF-8?q?=E2=80=99=20Alignment=20issue,=20Backspace=20from=20a=20blank?=
 =?UTF-8?q?=20space=20not=20working?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modules/login/VerificationForm.tsx     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/audire/audire-mobile-app/src/modules/login/VerificationForm.tsx b/audire/audire-mobile-app/src/modules/login/VerificationForm.tsx
index b3693c2..86b8033 100644
--- a/audire/audire-mobile-app/src/modules/login/VerificationForm.tsx
+++ b/audire/audire-mobile-app/src/modules/login/VerificationForm.tsx
@@ -86,6 +86,15 @@ const VerificationView: FC<VerificationFormProps> = ({
     });
   };
 
+  const handleBackspace = (index: number) => {
+    const prevRef = inputRefs.current[index - 1];
+    prevRef?.current?.focus?.();
+    setOTPValues((prev) => {
+      prev[index - 1] = '';
+      return [...prev];
+    });
+  };
+
   const handleResendOTP = () => {
     triggerOTP({ mobile });
     setResendCountdown(60);
@@ -112,6 +121,11 @@ const VerificationView: FC<VerificationFormProps> = ({
         keyboardType="numeric"
         onChangeText={(newValue) => handleOtpInputChange(index, newValue)}
         maxLength={1}
+        onKeyPress={({ nativeEvent }) => {
+          if (nativeEvent.key === 'Backspace') {
+            handleBackspace(index);
+          }
+        }}
       />
     ));
   };
@@ -119,9 +133,9 @@ const VerificationView: FC<VerificationFormProps> = ({
   return (
     <Box display="flex" flex={1} justifyContent="center" w="$full">
       <Box display="flex" mb="$6">
-        <Text fontSize="$2xl" fontWeight="bold" color="black" pl="$6">
+        <Text fontSize="$xl" fontWeight="bold" color="black" pl="$6">
           Verify
-          <Text color="$fuchsia800" fontWeight="bold" fontSize="$2xl" ml="$1">
+          <Text color="$fuchsia800" fontWeight="bold" fontSize="$xl" ml="$1">
             OTP
           </Text>
         </Text>