Formik: Dirty handling workflow

[slightlytyler]

Trying to implement a workflow as follows:

Users sees a pristine form, save button is hidden => user begins typing in input, form becomes dirty, save button is shown => user saves, form becomes pristine, save button is hidden

Is this currently possible in formik? dirty is remaining as false for me up until the form submitted and is never reset afterwards

[jaredpalmer]

let me try in a codesandbox

[jaredpalmer]

Is save supposed to actually submit the <form>?

[slightlytyler]

yes "save" is either clicking the submit button or hitting enter from an appropriate form

[slightlytyler]

Second part of this (returning to "pristine" after save) seems to be accomplished by calling resetForm(values). Is that the intended API?

[slightlytyler]

Here's my config for reference:

[UPDATED]

const container = withFormik({
  handleSubmit: (values, { props, resetForm }) =>
    props
      .handleSubmit(omit(['httpProxy', 'httpsProxy'], values))
      .then(compose(resetForm, get('settings')))
      .catch(ary(0, resetForm)),
  mapPropsToValues: get('data'),
  validateOnBlur: false,
  validateOnChange: true,
  validationSchema: yup.object({
    dtrHost: yup.string().required(),
    webTlsCA: yup.string().required(),
    webTlsCert: yup.string().required(),
  }),
});

[jaredpalmer]

Yes that's what happens when you pass values to resetForm(values).

[jaredpalmer]

I think this is what you want. https://codesandbox.io/s/0qr1wkp49w

[slightlytyler]

Very close but I actually need dirty to toggle onChange rather than onSubmit. is that possible?

[jaredpalmer]

hmmm....don't think so

I think we should mutate this.initialValues if someone passes values to resetForm(values). That would allow you to check if values are different

[slightlytyler]

Does that fix the issue with dirty not toggling onChange? Or is #197 solving a different problem?

[slightlytyler]

I had assumed on first use that validateOnChange would also cause dirty checking to happen then as well

[jaredpalmer]

validateOnChange and validateOnBlur are true by default in 0.9.2, but I don't think I considered how it might impact the the meaning of dirty. I want to have a larger conversation about pristine / dirty, but this PR would allow you to check the equality of initialValues with current values, while not making a breaking change.

// if values is flat
{props.values !== props.initialValues &&
  <button type="submit">Save</button>
}

// otherwise
{!isEqual(props.values, props.initialValues) &&
  <button type="submit">Save</button>
}

[slightlytyler]

Thank you, looks like this is going to work fine (just have to do a shallow equal check since props.values ref changes). Would love to be a part of that conversation. My quick two cents:

dirty and pristine to me are the inverse of each other so they could be represented by the same prop. If a form's current values match the initial values it's pristine, if not it's dirty. I think your change in #197 actually works towards this as initialValues should be set to a new value on resetForm(values)

[jaredpalmer]

Released in 0.9.4

[paramjitkaur]

How do we test dirty in HOC withFormik. In the documentation I see that isDirty is there in the Render formik but I didnt see it being there with withFormik use.Just wanted to know if we can use isInitialValid for the same dirty check there

[insidewhy]

Was really surprised to learn that dirty means "different to initial values" rather than "different to submitted values" as in every other form library I've used. I tried to resetValues to the submitted values, and that cleared every single input in my form. Argh.