Formik: Add isDirty callback prop to Field

[kylebebak]

🚀 Add isDirty callback prop to Field

Motivation

Currently, Formik compares the current value of a field with its initial value to determine if the field is dirty.

This is great for most fields, but falls over for some fields that don't compare equal according to Formik even if they're "the same" according to a user of the library.

For example, if you use draft-js with Formik, as soon as you focus on a draft-js input, the form becomes dirty because value doesn't compare equal with the initial value.

Suggested change

Add a prop to Field called isDirty, a function that receives (initial, value), and returns true/false.

If this isDirty prop is passed, every time a field is updated, isDirty is invoked and determines how dirty is updated for this individual field, and hence its form.

This gives the user total control of how the comparison between initial and value happens.

[hunteryxx]

I experienced similar situation before.
I think the form level dirty is comparing with the initial values.

In regards to the isDirty prop, maybe to add an new object called "dirty", just like those existing errors and values at the form level, that can be accessed from formikProps would be great.

[StudioSpindle]

In the meantime an alternative is:

{({ field, meta: { error, value, initialValue } }) => {

  {error === undefined && value !== initialValue &&
    // do something when the field has changed
  }
// ...
}}

But having this in the Field meta would be great.

[oozanyuksel]

Having a dirty field list is also ok too. I'm trying to build an edit form and want to highlight fields that are changed from its initial values. Form has a dirty boolean field but that doesn't help for my case. I'm comparing props of initialValues to props of values for now.