SetValues Formik Function disables Formik HandleSubmit

Question

I have a form that can handle submission a couple of different ways. The difference is managed by a flag in the form Values that can either be true or false.

I am running into this really weird issue where when I use the Formik setValues() function the form doesn't enter the handleSubmit function at all. It just stops execution. However if I set the value using just by going this.props.values.x = ... it enters the function and continues with submitting the form just fine.

Why is this happening?

there's really no point in showing code as the description tells you everything but this is what the submit handler looks like:

A confirmation function calls the submit handler which sets the value and then attempts to call handleSubmit

        <Confirmation
          items={this.confirmationData()}
          isLoading={this.props.isSubmitting}
          open={isConfirming}
          preapproval={true}
          submitAnother={this.submitAnother}
          onClick={this.submit} //this is the submit handler
          onClose={() => this.setState({ isConfirming: false })}
        />

  submit = () => {
    this.props.setValues({ ...this.props.values, submit: true})
    this.props.handleSubmit()
  }

if the first line is changed to this.props.values.submit = true, the form submits however, using the setValues function, The application stops executing after setting the submit value to be true.

Answer 1

Turns out the issue was the is Validating Flag being set to true when you call setFieldValue so the simplest solution is to pass a third argument to setFieldValue to manually turn off validation:

  submit = () => {
    this.props.setFieldValue('submit', true, false)
    this.props.handleSubmit()
  }