Formik: MultistepWizard example validation broken

[wafflepie]

Current Behavior

If you edit the email field in the MultistepWizard storybook example, the favoriteColor field gets validated as well, because it is marked as touched (because pressing the Next button triggers submission).

Steps to Reproduce

Open the MultistepWizard storybook example, click the Next button, focus the email field and then blur (click elsewhere).

Expected behavior

Only the email field gets validated.

Suggested solution(s)

Only mark the registered fields as touched.

Additional context

I tried to solve it by calling forEach(field => formikBag.setFieldTouched(field, false, false), fields); in the handleSubmit method, but the form freezes for a while (it is not a very efficient solution, but it sort of works).

EDIT: Managed to find a better solution: calling formikBag.setTouched(map(F, values));, meaning that I pass the values object with each property set to false. This won't work for nested values, though. I still think that Formik should only flag the registered fields when submitting, it would be a more performant and elegant solution.

CodeSandbox Link: N/A

---

• Formik Version: 1.0.1
• React Version: 16.4.1
• TypeScript Version: N/A
• Browser and Version: Google Chrome Version 67.0.3396.99 (Official Build) (64-bit)
• OS: macOS High Sierra
• Node Version: 8.11.3
• Package Manager and Version: yarn 1.7.0

[danielgent]

Issue https://github.com/jaredpalmer/formik/issues/845 put this up on https://codesandbox.io/s/wwpwj56xok for easy viewing

Formik is a really great library for single forms but alas this way of writing multistep forms doesn't work because the submission button sets all fields to be touched (as wafflepie wrote!).

@wafflepie - is your formikBag.setTouched(map(F, values)); an acceptable solution from what you've found so far? Does it merit a PR for this example? I'd rather not write all my own custom code!

[wafflepie]

It's working for me so far, but it means that I'm unable to use nested fields (which I don't currently need).

    handleSubmit = (values, formikBag) => {
        if (this.activePage.onSubmit) {
            this.activePage.onSubmit(values, formikBag);
        } else {
            this.props.next(this.props.namespace);

            // TODO: this will break on nested objects
            formikBag.setTouched(map(F, values));
            formikBag.setSubmitting(false);
        }
    };

This is my current solution. As I said, IMO it would be better to only touch registered fields (instead of all fields) upon submission. I haven't found the opportunity to fix it yet, though.

[danielgent]

Václav this is amazing! It fixes the multistep form solution. I tagged this issue in a newer duplicate issue so people can see

[Huanzhang89]

Actually an even easier solution is to just use
formikBag.setTouched({});
This will set touched to an empty object, which is the initial value of touched anyways.

[stale[bot]]

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.

[Huanzhang89]

Should be fixed by https://github.com/jaredpalmer/formik/pull/928

I suggest closing this issue

[danielgent]

@Huanzhang89 - your fix formikBag.setTouched({}); worked amazingly for me. My previous code was actually creating an invalid touched object

[Huanzhang89]

Glad to hear it! Yeah that code didn't make sense to me since the touched object applies to the whole form and we don't really care about if the previous page was touched since everytime we submit Formik touches all the fields anyway, so the easiest solution is just to reset it to {}!

[maddhruv]

Closing, as being tracked in https://github.com/formium/formik/issues/1315