jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.88k stars 2.79k forks source link

Yup.array().min() splits error message string and adds it to corresponding formik error array #3178

Open ferdiamg opened 3 years ago

ferdiamg commented 3 years ago

Bug report

Current Behavior

I've got multiple checkboxes which are stored through a formik FieldArray in an array. Everything works fine with the validation when starting out and selecting >= 3 checkboxes. However when deselecting them all. Suddenly the error message from .min() is being split by its characters and pushed into the corresponding array?

grafik

This is the Yup validation:

featuresToSend: Yup.array()
    .min(3, "Mindestens ${min} Besonderheiten benötigt.")
    .required("Bitte Besonderheiten auswählen."),

and this is the FieldArray:

<FieldArray
      name="featuresToSend"
      render={arrayHelpers => (
        <>
          {features.map((feature, index) => (
            <FeatureWrapper key={index}>
              <input
                name="featuresToSend"
                id={feature}
                type="checkbox"
                value={feature}
                checked={formik.values.featuresToSend.includes(feature)}
                onChange={e => {
                  if (e.target.checked) arrayHelpers.push(feature);
                  else {
                    const idx = formik.values.featuresToSend.indexOf(feature);
                    arrayHelpers.remove(idx);
                  }
                }}
              />
              <CheckboxWrapperLabelUncolored htmlFor={feature}>
                {feature}
              </CheckboxWrapperLabelUncolored>
            </FeatureWrapper>
          ))}
        </>
      )}
    />

Expected behavior

The error array should be empty.

Reproducible example

Sadly not reproducible here.. maybe I am missing something: https://codesandbox.io/s/formik-codesandbox-template-forked-1kks9?file=/index.js

Suggested solution(s)

No idea sadly.

Additional context

Seems like the same is happening here: https://github.com/formium/formik/issues/3104

Your environment

Software Version(s)
Formik ^2.2.6
React ^16.12.0
TypeScript ^3.9.6
Browser Chrome/Firefox
npm/Yarn yarn 1.22.10
Operating System MacOS BigSur
github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

ryangiglio-remesh commented 3 years ago

+1, running into this issue with both .min() and .max()

ryangiglio-remesh commented 3 years ago

It appears there was a PR made to fix this issue in December, but was never merged https://github.com/formium/formik/pull/2994