Fixes date fields autofilling on edit

globaldothealth · Mar 23, 2024 · 575ee8b · 575ee8b
1 parent 48098b8
commit 575ee8b
Showing 1 changed file with 32 additions and 1 deletion.
diff --git a/verification/curator-service/ui/src/components/common-form-fields/FormikFields.tsx b/verification/curator-service/ui/src/components/common-form-fields/FormikFields.tsx
@@ -193,6 +193,37 @@ interface DateFieldProps {
 export function DateField(props: DateFieldProps): JSX.Element {
     const classes = useStyles();
 
+    if (props.value) {
+        return (
+            <div className={classes.fieldRow}>
+                <LocalizationProvider dateAdapter={AdapterDateFns}>
+                    <DesktopDatePicker
+                        className={classes.field}
+                        data-testid={props.name}
+                        label={props.label}
+                        inputFormat="yyyy/MM/dd"
+                        mask="____/__/__"
+                        minDate={new Date('2019/12/01')}
+                        disableFuture
+                        value={props.value || undefined}
+                        onChange={props.onChange}
+                        renderInput={(params) => (
+                            <MuiTextField
+                                {...params}
+                                name={props.name}
+                                fullWidth
+                                // Non formik component needs different error handling
+                                error={!!props.errorMessage}
+                                helperText={props.errorMessage}
+                            />
+                        )}
+                    />
+                </LocalizationProvider>
+                {props.required && <RequiredHelperText name={props.name} />}
+            </div>
+        );
+    }
+
     return (
         <div className={classes.fieldRow}>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
@@ -204,7 +235,7 @@ export function DateField(props: DateFieldProps): JSX.Element {
                     mask="____/__/__"
                     minDate={new Date('2019/12/01')}
                     disableFuture
-                    value={props.value}
+                    value="yyyy/MM/dd"
                     onChange={props.onChange}
                     renderInput={(params) => (
                         <MuiTextField