Formik: 1.0.0-beta.4: form `isValid` is not correctly set

Created on 2 Jul 2018  路  10Comments  路  Source: formium/formik

Current Behavior

isValid is false after validation even though no errors exists on a single field form

Steps to Reproduce

https://codesandbox.io/s/q336r5pnkw
Type in a username. The validation that is performed on the field level on change is a combination of sync yup and async username validation (mocking an api call checking for the existance of a username). The isValid prop of the form does not update according to the validation results.

Expected behavior

When neither a sync yup validation error nor an async validation error occurs, isValid is true.

Suggested solution(s)

No clue. Am i doing the validation right?

CodeSandbox Link:
https://codesandbox.io/s/q336r5pnkw


  • Formik Version: 1.0.0-beta.4
  • React Version: 16.3.2
  • Browser and Version: Google Chrome Version 67.0.3396.99
  • OS: Windows 10
stale

All 10 comments

The issue here is that the setFieldError uses the setIn helper, which does not remove undefined values, so the errors object ends up as {errors: { username: undefined }}. The isValid currently just checks for Object.keys(this.state.errors).length === 0 which is incorrect.

@jaredpalmer thoughts on the best place to fix this, in the setIn helper, in the setFieldError implementation or in the isValid check?

Signature for setFieldError should also probably be changed from

setFieldError = (field: string, message: string)

to

setFieldError = (field: string, message: string | undefined)

I see. Yeah this is a bug (and a bad one). Would the PR to change setIn implementation to just lodash鈥檚 fp鈥檚 _set help?

set from lodash doesn't remove undefined values afaik and would also result in { errors: { username: undefined }}.

Also building with any of the fp helpers, even cherry picking via lodash/fp/set significantly increases bundle size.

Exactly why I haven鈥檛 done it yet. Trying to keep bundle size in check

So, change the isValid implementation or the setIn helper?

We need to change setIn. isValid defininition is (almost) correct.

I attempted to fix this. Please have a look!

That's a pretty nasty bug we also faced. @jaredpalmer, would be great if you could release a new version of Formik!

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

Was this page helpful?
0 / 5 - 0 ratings