jaredpalmer / formik

Build forms in React, without the tears šŸ˜­
https://formik.org
Apache License 2.0
33.9k stars 2.79k forks source link

initialValues={validationSchema.cast({})} breaks form validation #3869

Open Vercjames opened 1 year ago

Vercjames commented 1 year ago

Bug report

using .cast({}) causes form validation to stop working

Current Behavior

the Yup cast method is not instantiating form validation

Expected behavior

Form validation should behave as normal.

Reproducible example

this code works:

 const initialValues = {
    name: "test",
  }

  const validationSchema = Yup.object().shape({
    name: Yup.string().required("Category Name is required").default(""),
  })

 ...
  <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={(values) => { console.log(values) }}
  >
  {({ values, handleChange, errors, touched, handleBlur }) => (
    <Form>
      <input
        type="text"
        name="name"
        value={values.name}
        onBlur={handleBlur("name")}
        onChange={handleChange("name")}
      />
      {errors.name && touched.name && (
        <div>
          {errors.name}
        </div>
      )}
    </Form>
  )}
</Formik>

this code does not:

  const validationSchema = Yup.object().shape({
    name: Yup.string().required("Category Name is required").default("test"),
  })
 ...
  <Formik
     validationSchema={validationSchema.cast({})}
    validationSchema={validationSchema}
    onSubmit={(values) => { console.log(values) }}
  >
  {({ values, handleChange, errors, touched, handleBlur }) => (
    <Form>
      <input
        type="text"
        name="name"
        value={values.name}
        onBlur={handleBlur("name")}
        onChange={handleChange("name")}
      />
      {errors.name && touched.name && (
        <div>
          {errors.name}
        </div>
      )}
    </Form>
  )}
</Formik>

Suggested solution(s)

fix issue where .default("ANY VALUE") breaks form validation.

Your environment

Software Version(s)
Formik 2.2.9
React 18.2.0
TypeScript 5.0.2
Browser Chrome
npm/Yarn 1.22.19
Operating System Mac
flexbox commented 1 year ago

Confirmed on my react-native app as well. This code example from the docs works perfectly.

But as soon as I introduce a validationSchema I can't handle submitting anymore.

@Vercjames What's your yup version?

Mine was

"yup": "^0.32.11"

yup maintainers recently reverted a change https://github.com/jquense/yup/commits/master You probably pulled a broken version.


Edit I tried to bump dependencies to

"formik": "^2.4.3",
"yup": "^1.2.0"

I still experience this issue and I noticed I have a problem with some schema but not all of them.

// āœ… works
export const gtinSchema = Yup.object().shape({
  gtin: Yup.string()
    .min(8, "error.gtinMinLength")
    .max(14, "error.gtinMaxLength")
    .required("error.required"),
});

// āŒ broken with `validationSchema` and `onSubmit`
export const priceSchema = Yup.object().shape({
  price: Yup.number().min(0, "error.priceMinLength").required("error.required"),
});
quantizor commented 1 year ago

@Vercjames could you confirm with the latest version? Thank you!