Formik onSubmit not triggering save function on submission?

Question

    const AddTimeOffDialog = ({ openModal, closeModal }: AddTimeOffDialogType): JSX.Element => {

    const newValues: AddTimeOffFormType = {
    startDate: null,
    endDate: null,
    allDay: false,
    startTime: null,
    endTime: null,
    reason: '',
  };
    const initialValues: AddTimeOffFormType = newValues;
    const validationSchema = AddTimeOffValidationSchema(intl);

  const handleSaveTimeOff = (formValues: AddTimeOffFormType) => {
    console.log(formValues);
    console.log('submitted')
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      enableReinitialize
      validateOnBlur={false}
      validateOnChange={true}
      onSubmit={handleSaveTimeOff}
    >
      {(formProps) => {
        return (
          <Form id="timeOffForm" autoComplete="off">
            <Dialog open={openModal} onClose={() => closeModal}>
              <DialogTitle className={classes.dialogTitle}>
                <Typography className={classes.dialogTitleText}>
                  <FormattedMessage id="advisorScheduling.addTimeOff" />
                </Typography>
              </DialogTitle>
              <DialogContent sx={{ marginTop: 2 }}>
                <Grid container rowSpacing={2}>
                  <Grid item container xs={12} columnSpacing={3} justifyContent="center">
                    <Grid item xs={4}>
                      <DatePickerWrapper
                        name="startDate"
                        label={`${intl.formatMessage({ id: 'advisorScheduling.startDate' })}`}
                        error={Boolean(formProps.touched.startDate && formProps.errors.startDate)}
                        helperText={
                          formProps.touched.startDate && formProps.errors.startDate ? formProps.errors.startDate : null
                        }
                      />
                    </Grid>
                    <Grid item xs={4}>
                      <DatePickerWrapper
                        name="endDate"
                        label={`${intl.formatMessage({ id: 'advisorScheduling.endDate' })}`}
                        error={Boolean(formProps.touched.endDate && formProps.errors.endDate)}
                        helperText={
                          formProps.touched.endDate && formProps.errors.endDate ? formProps.errors.endDate : null
                        }
                      />
                    </Grid>
                    <Grid item xs={4} sx={{ mt: 1 }}>
                      <FormLabel>{intl.formatMessage({ id: 'advisorScheduling.allDay' })}</FormLabel>
                      <RadioGroupWrapper
                        name="allDay"
                        options={[
                          { value: true, label: intl.formatMessage({ id: 'common.yes' }) },
                          { value: false, label: intl.formatMessage({ id: 'common.no' }) },
                        ]}
                      />
                    </Grid>
                    <Grid item container></Grid>
                  </Grid>
                  <Grid item container xs={12} columnSpacing={3}>
                    <Grid item xs={4}>
                      <TimePickerWrapper
                        name="startTime"
                        label={`${intl.formatMessage({ id: 'advisorScheduling.startTime' })}`}
                        error={Boolean(formProps.touched.startTime && formProps.errors.startTime)}
                        helperText={
                          formProps.touched.startTime && formProps.errors.startTime ? formProps.errors.startTime : null
                        }
                        disabled={formProps.values.allDay}
                      />
                    </Grid>
                    <Grid item xs={4}>
                      <TimePickerWrapper
                        name="endTime"
                        label={`${intl.formatMessage({ id: 'advisorScheduling.endTime' })}`}
                        error={Boolean(formProps.touched.endTime && formProps.errors.endTime)}
                        helperText={
                          formProps.touched.endTime && formProps.errors.endTime ? formProps.errors.endTime : null
                        }
                        disabled={formProps.values.allDay}
                      />
                    </Grid>
                  </Grid>
                  <Grid item container xs={12} columnSpacing={3}>
                    <Grid item xs={4}>
                      <TextFieldWrapper
                        name="reason"
                        label={`${intl.formatMessage({ id: 'advisorScheduling.note' })}`}
                        onBlur={() => formProps.setFieldTouched('reason', true, true)}
                      />
                    </Grid>
                  </Grid>
                </Grid>
              </DialogContent>
              <DialogActions>
                <Button variant="outlined" form="timeOffForm" type="submit">
                  <FormattedMessage id="common.save" />
                </Button>
                <Button
                  onClick={() => {
                    closeModal();
                    formProps.resetForm();
                  }}
                  variant="contained"
                >
                  <FormattedMessage id="common.cancel" />
                </Button>
              </DialogActions>
            </Dialog>
          </Form>
        );
      }}
    </Formik>
  );
}; 

I am using Formik and MUI to build this form dialog. For some reason the onSubmit prop in Formik is not triggering my handleSaveTimeOff() function. I have a submit button inside DialogActions that points to the form id in Form. Not even a simple console.log() inside my function will get triggered. Any idea why that handleSaveTimeOff() isn't triggering on button click/form submission?

Answer 1

I had an issue in my form validation schema that was causing the function not to work. If you have this issue make sure your validation schema is set up correctly.