Fix: Year Of Birth Field Validation Condition in Patient transfer form

src/components/Facility/TransferPatientDialog.tsx

@@ -75,22 +75,38 @@ const TransferPatientDialog = (props: Props) => {
   const maxYear = new Date().getFullYear();
 
   const handleChange = (e: FieldChangeEvent<unknown>) => {
-    if (
-      e.name === "year_of_birth" &&
-      parseInt((e.value as string) || "0") > maxYear
-    ) {
+    const value = String(e.value);
+
+    if (e.name === "year_of_birth") {
+      if (value.length <= 4) {
+        dispatch({
+          type: "set_form",
+          form: { ...state.form, [e.name]: e.value },
+        });
+      }
+    } else {
       dispatch({
-        type: "set_error",
-        errors: {
-          ...state.errors,
-          [e.name]: `Cannot be greater than ${maxYear}`,
-        },
+        type: "set_form",
+        form: { ...state.form, [e.name]: e.value },
       });
-      return;
+    }
+  };
+
+  const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const yearValue = Number(state.form.year_of_birth);
+    if (!state.form.year_of_birth) return;
+    let errorMessage = "";
+    if (yearValue > maxYear) {
+      errorMessage = `Cannot be greater than ${maxYear}`;
+    } else if (yearValue < 1900) {
+      errorMessage = `Cannot be smaller than 1900`;
     }
     dispatch({
-      type: "set_form",
-      form: { ...state.form, [e.name]: e.value },
+      type: "set_error",
+      errors: {
+        ...state.errors,
+        [e.target.name]: errorMessage,
+      },
     });
   };
 
@@ -115,6 +131,11 @@ const TransferPatientDialog = (props: Props) => {
             errors[field] = `Cannot be greater than ${maxYear}`;
             invalidForm = true;
           }
+
+          if (parseInt(state.form[field] || "0") < 1900) {
+            errors[field] = `Cannot be smaller than 1900`;
+            invalidForm = true;
+          }
           return;
         default:
           return;
@@ -193,9 +214,8 @@ const TransferPatientDialog = (props: Props) => {
               label="Year of birth"
               labelClassName="text-sm"
               value={state.form.year_of_birth}
-              min="1900"
-              max={maxYear}
               onChange={handleChange}
+              onBlur={handleOnBlur}
               placeholder="Enter year of birth"
               error={state.errors.year_of_birth}
             />