Formik: [Next] Revisit the meaning of dirty and isValid

[jaredpalmer]

dirty is confusing and should to be probably be fixed in the next release. Currently, it is really equivalent tohasTouched. The issue was that when we released 0.9 and set validateOnChange AND validateOnBlur default true, we forgot to revisit the meaning of dirty in the midst of all the render props fun. Unfortunately, this is def breaking as it would change the behavior of isValid as well, but I think we need to rip the bandaid off.

Possible solutions

• Keep existing dirty as is for backwards compat, but introduce: hasTouched and hasErrors and hasChanged which are more descriptive and explicit.
• const dirty = deepEqual(this.initialValues, this.state.values) (this would be breaking)
• Do both?

Thoughts?

[pswami]

I like the first solution but not sure if hasChanged is needed. Doesn't hasChanged and dirty mean the same thing?

[web2wire]

I like the first solution. I've been wrestling with trying to work out what dirty and isValid mean in Formik terms for most of a week now until I saw this. For me dirty means a form field has changed so you could then alert if a user tries to click away without saving but it doesn't get set even if a form value is updated. I'm still not quite sure what the point of touched is, as if you click into and out of a field it count as touched when nothing of substance has actually happened.
In the forms I am trying to use Formik with there is no real need for onBlur handlers at all as they add nothing that couldn't also be done in the change handlers and just mean I have to pass extra props down various form component levels. Except that in the current implementation it seems that isValid and dirty are only updated by blur handlers and isValid is never set true even when the validation process has passed successfully in response to a field being changed.
So my vote is definitely for a clarification in terms of the names themselves, what they actually mean, and what affects them. Currently it's not very clear at all.

[cvburgess]

Chiming in with some recent experience: forms with one field are rough currently. isValid cannot be used with and autosave logic becuase the blur may not have happened. Instead, I have to do this:

saveForm = debounce(({ errors, values }) => {
  const noErrors = Object.keys(errors).length === 0;
  if (noErrors) {
    this.props.onSubmit(values);
  }
}, DEBOUNCE_DURATION);

hasErrors being a basic check for form validity would be incredibly useful.