From e52bc6147d19acd9fc5944414ede07c69f98d3b9 Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Thu, 30 Mar 2023 11:03:29 +0530
Subject: [PATCH] Fix :: Bug in phone number input during enter key press 
 (#5879)

* fix :: bug in country select

* typo fix
---
 frontend/src/OnBoardingForm/ContinueButton.jsx       |  4 ----
 .../src/OnBoardingForm/ContinueButtonSelfHost.jsx    |  5 -----
 frontend/src/OnBoardingForm/OnBoardingForm.jsx       | 11 +++++++++--
 frontend/src/OnBoardingForm/OnbboardingFromSH.jsx    | 12 ++++++++++--
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/src/OnBoardingForm/ContinueButton.jsx b/frontend/src/OnBoardingForm/ContinueButton.jsx
index 63f5a7b3bf..fcaf7d9d56 100644
--- a/frontend/src/OnBoardingForm/ContinueButton.jsx
+++ b/frontend/src/OnBoardingForm/ContinueButton.jsx
@@ -14,10 +14,6 @@ function ContinueButton({ setPage, formData, page, setCompleted, isLoading, setI
     const keyDownHandler = (event) => {
       if (event.key === 'Enter' && !activeCondition) {
         if (page < 3) setPage((currPage) => currPage + 1);
-        if (page == 3) {
-          setIsLoading(true);
-          setCompleted(true);
-        }
       }
     };
     document.addEventListener('keydown', keyDownHandler);
diff --git a/frontend/src/OnBoardingForm/ContinueButtonSelfHost.jsx b/frontend/src/OnBoardingForm/ContinueButtonSelfHost.jsx
index d912de6ca1..8068f2a669 100644
--- a/frontend/src/OnBoardingForm/ContinueButtonSelfHost.jsx
+++ b/frontend/src/OnBoardingForm/ContinueButtonSelfHost.jsx
@@ -49,11 +49,6 @@ function ContinueButtonSelfHost({
           }
         }
         if (page < 5) setPage((currPage) => currPage + 1);
-        if (page == 5) {
-          setIsLoading(true);
-          setCompleted(true);
-          return;
-        }
       }
     };
     document.addEventListener('keydown', keyDownHandler);
diff --git a/frontend/src/OnBoardingForm/OnBoardingForm.jsx b/frontend/src/OnBoardingForm/OnBoardingForm.jsx
index 72d16d86aa..a9dffbc4df 100644
--- a/frontend/src/OnBoardingForm/OnBoardingForm.jsx
+++ b/frontend/src/OnBoardingForm/OnBoardingForm.jsx
@@ -243,7 +243,6 @@ export function Page2({ formData, setFormData, setPage, page, setCompleted, isLo
 }
 
 export function Page3({ formData, setFormData, setPage, page, setCompleted, isLoading, setIsLoading, darkMode }) {
-  const props = { formData, setFormData };
   const btnProps = {
     setPage,
     page,
@@ -259,10 +258,18 @@ export function Page3({ formData, setFormData, setPage, page, setCompleted, isLo
         inputProps={{
           autoFocus: true,
         }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            setIsLoading(true);
+            setCompleted(true);
+          }
+        }}
         value={formData?.phoneNumber}
         inputClass="tj-onboarding-phone-input"
         containerClass="tj-onboarding-phone-input-wrapper"
-        onChange={(phone) => setFormData({ ...formData, phoneNumber: phone })}
+        onChange={(phone) => {
+          setFormData({ ...formData, phoneNumber: phone });
+        }}
         isValid={(inputNumber, country, countries) => {
           return countries.some((country) => {
             return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
diff --git a/frontend/src/OnBoardingForm/OnbboardingFromSH.jsx b/frontend/src/OnBoardingForm/OnbboardingFromSH.jsx
index f55d584912..cfd0bbb119 100644
--- a/frontend/src/OnBoardingForm/OnbboardingFromSH.jsx
+++ b/frontend/src/OnBoardingForm/OnbboardingFromSH.jsx
@@ -44,6 +44,7 @@ function OnbboardingFromSH({ darkMode }) {
   };
 
   useEffect(() => {
+    if (page == 3) document.getElementsByClassName('tj-onboarding-phone-input').focus();
     if (completed) {
       authenticationService
         .setupAdmin({
@@ -283,7 +284,6 @@ export function Page2({ formData, setFormData, setPage, page, setCompleted, isLo
   );
 }
 export function Page3({ formData, setFormData, setPage, page, setCompleted, isLoading, setIsLoading, darkMode }) {
-  const props = { formData, setFormData };
   const btnProps = {
     setPage,
     page,
@@ -302,7 +302,15 @@ export function Page3({ formData, setFormData, setPage, page, setCompleted, isLo
         value={formData?.phoneNumber}
         inputClass="tj-onboarding-phone-input"
         containerClass="tj-onboarding-phone-input-wrapper"
-        onChange={(phone) => setFormData({ ...formData, phoneNumber: phone })}
+        onChange={(phone) => {
+          setFormData({ ...formData, phoneNumber: phone });
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            setIsLoading(true);
+            setCompleted(true);
+          }
+        }}
         isValid={(inputNumber, country, countries) => {
           return countries.some((country) => {
             return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);