Enabled auto-switch feature for DOB input on the Patient Registration…

… page (#9870)
ohcnetwork · Jan 15, 2025 · e3533a3 · e3533a3
1 parent 1833fb6
commit e3533a3
Showing 1 changed file with 28 additions and 6 deletions.
diff --git 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={