Setting no validate or validationSchema clears out imperative error state on onBlur/onChange

[inooid]

Current Behavior

Whenever you setup a Formik form and supply no validate or validationSchema, but you call setErrors/setFieldError as if it's coming from an API, it will clear out the entire errors object from Formik whenever you change or blur ANY field.

Steps to Reproduce

See codesandbox for more info

Expected behavior

I would say whenever you apply no validate or validationSchema, it should only clear out the error of the field you touched, not the entire form.

Suggested solution(s)

I guess onBlur and onChange validation should only clear out the field it is actually touching/changing.

Additional context

Note: The Formik version of 0.11.11 does not clear the errors object on change or blur at all (which to me seems a bit more reasonable, since you explicitly set the errors yourself and there's not validation, so you'll have to manually clear them as well).

Note: I haven't tested if this behaviour also happens whenever you do have a validate or validationSchema setup.

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

---

• Formik Version: 1.0.3
• React Version: 16.3.2
• TypeScript Version: -
• Browser and Version: Chrome Version 68.0.3440.106 (Official Build) (64-bit)
• OS: OS X 10.13.6
• Node Version: -
• Package Manager and Version: -

[stale]

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.

[inooid]

I don't think this is stale. I am curious if this behaviour is intended or whether it's a bug 🤔

[MDornian]

I am experiencing the same problem and setting the third parameter "shouldValidate" on either setFieldTouched or setFieldError has not impact.

The setFieldError places the error in the error collection; however, it is removed again before the final re-rendering.

[stale]

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.

[stale]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[dev99problems]

Hey guys, any updates on this?
Seems like it is still reproducible

[vtereshyn]

I get a similar issue when I try to setFieldError which I haven't in validationSchema. So I can get this error, but when I'm editing another field, an errors object contains all of the errors except error from setFieldError

I guess this issue because

return promise
      .then((errors: FormikErrors<Values>) => {
        this.setState(prevState => {
          if (!isEqual(prevState.errors, errors)) {
            return { errors };
          }
          return null; // abort the update
        });
        return errors;
      })
      .catch(x => x);

Here prevState.errors and errors are different, and if they are different we return new errors object...
Maybe I'm incorrect here...

@jaredpalmer , could you please help us here?

[simon-nystrom]

@vtereshyn I'm also struggling with this specific problem atm. Can't use custom validators for other fields if I combine them in the same as s with validation

Edit: Seems setFieldTouched is working as expected, if that's of any help

[vtereshyn]

@simon-nystrom , I resolved this problem using Field validate prop. But, I am not sure that this is a good idea.

[simon-nystrom]

@vtereshyn how did you do that? I'm trying to combine setFieldError with a custom field that isn't uinsg the Formik

[vtereshyn]

@simon-nystrom , why you should use custom field withoutFormik? use your custom input with formik Field and pass validate prop with your function and inside this function just return errorMessage. Also, inside your renderInput function you should check if error exists. Look through examples which exist at Formik website

[simon-nystrom]

@vtereshyn you gave me an idea. Basically I'm integrating another third party library component with this and that component contains two input fields, but in this case I can consolidate the two errors to into one. This means I can use your approach and just combine the validate function to validate both fields. Thanks for the help. Works fine now 👍

[vtereshyn]

@simon-nystrom , glad to help :)

[vigneshwaran-chandrasekaran]

is this issue fixed? I am still facing this problem. I am using version 1.5.8

[vigneshwaran-chandrasekaran]

@jaredpalmer can you please help us to solve this problem

[h0jeZvgoxFepBQ2C]

Yeah I have the same problem.

[thj-dk]

I'm still seeing this problem...

[bymoe]

Anyone managed to solve this?

[val-samonte]

I think this needs to be reopened.

[dev99problems]

@ImSolitude @val-samonte TBH I don't really think anybody gonna handle this, because this was reproducible in early 1.0.3 Formik version, which was in alfa at that time.

And if I'm not mistaken it was fixed in 1.1 or some newer versions.
So if you still use Formik 1.0.3 or similar alfa version maybe you should try to update it or if you still face this issue in newer versions of Formik maybe it will be more appropriate to open a new issue.

[ZahidSaeed7]

This is still NOT fixed. Any solution?

[aloukianova-godaddy]

This is still happening in v2.2.9. Using validate prop does cause the errors to be set correctly and that is a good way to go, for anyone googling this, but if you weren't using the validate prop before, it might cause your onSubmit function not to fire if errors is not empty. If you switch to using validate, make sure to return an empty object when your form is valid and clear out any custom errors.

[msnegurski]

So, for someone still finding this thread, you can just set validateOnBlur={false} and validateOnChange={false} on your Formik component

[RommelTJ]

So, for someone still finding this thread, you can just set validateOnBlur={false} and validateOnChange-{false} on your Formik component

This fix worked for me.

[CalvinD3v]

So, for someone still finding this thread, you can just set validateOnBlur={false} and validateOnChange={false} on your Formik component

@msnegurski what happens if one still needs that validateOnBlur={false} and validateOnChange={false} on your Formik component ?

[CalvinD3v]

@inooid did you find any solution to this issue?

[inooid]

@CalvinD3v honestly can't remember what I did to solve this. There are some ideas listed above though 👍

[orionivv]

I still need to solve this problem 😐
with validateOnChange={true} ❗️

[dayoolacodes]

validateOnBlur={false}

this fixed the error trigger on blur. Thanks

[AminTaiTntra]

Hi @inooid
Thanks for posting this issue, I've debug this and found an appropriate solution to fix this issue.
You can use setStatus to manage the BE errors.

Before : 
      fieldErrors?.forEach((item, index) => {
          if (Object.keys(item).length) {
            Object.keys(item).forEach((obj) => {
              console.log("FORMIK", fourCparamsRef);
              fourCparamsRef.current.setFieldError(`colorEstimation[${index}].${obj}`, item[obj]);
            });
          }
        });

After : 

        fourCparamsRef.current.setStatus({ colorEstimation: fieldErrors });


input.js

      {status && <span className='error-text'>{status}</span>}

So Here we can use setStatus instead of setFiedError.

[kpebron]

added validateOnBlur={false} but not validateOnChange={false} worked for me with both validate on frontend and actions.setFieldError on backend