From e3533a3a505eb0f308827b1e38a071dab715525c Mon Sep 17 00:00:00 2001
From: Mohamed amaan <121436543+modamaan@users.noreply.github.com>
Date: Wed, 15 Jan 2025 08:48:57 +0530
Subject: [PATCH] Enabled auto-switch feature for DOB input on the Patient
 Registration page (#9870)

---
 .../Patient/PatientRegistration.tsx           | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx
index 302395c1d63..ba851ff36c2 100644
--- a/src/components/Patient/PatientRegistration.tsx
+++ b/src/components/Patient/PatientRegistration.tsx
@@ -503,12 +503,22 @@ export default function PatientRegistration(
                                 value={
                                   form.watch("date_of_birth")?.split("-")[2]
                                 }
-                                onChange={(e) =>
+                                onChange={(e) => {
                                   form.setValue(
                                     "date_of_birth",
                                     `${form.watch("date_of_birth")?.split("-")[0]}-${form.watch("date_of_birth")?.split("-")[1]}-${e.target.value}`,
-                                  )
-                                }
+                                  );
+                                  const day = parseInt(e.target.value);
+                                  if (
+                                    e.target.value.length === 2 &&
+                                    day >= 1 &&
+                                    day <= 31
+                                  ) {
+                                    document
+                                      .getElementById("dob-month-input")
+                                      ?.focus();
+                                  }
+                                }}
                                 data-cy="dob-day-input"
                               />
                             </div>
@@ -518,17 +528,28 @@ export default function PatientRegistration(
 
                               <Input
                                 type="number"
+                                id="dob-month-input"
                                 placeholder="MM"
                                 {...field}
                                 value={
                                   form.watch("date_of_birth")?.split("-")[1]
                                 }
-                                onChange={(e) =>
+                                onChange={(e) => {
                                   form.setValue(
                                     "date_of_birth",
                                     `${form.watch("date_of_birth")?.split("-")[0]}-${e.target.value}-${form.watch("date_of_birth")?.split("-")[2]}`,
-                                  )
-                                }
+                                  );
+                                  const month = parseInt(e.target.value);
+                                  if (
+                                    e.target.value.length === 2 &&
+                                    month >= 1 &&
+                                    month <= 12
+                                  ) {
+                                    document
+                                      .getElementById("dob-year-input")
+                                      ?.focus();
+                                  }
+                                }}
                                 data-cy="dob-month-input"
                               />
                             </div>
@@ -538,6 +559,7 @@ export default function PatientRegistration(
 
                               <Input
                                 type="number"
+                                id="dob-year-input"
                                 placeholder="YYYY"
                                 {...field}
                                 value={