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 validation schema #2047

Open czaplej opened 4 years ago

czaplej commented 4 years ago

πŸ› Bug report

Yup validation schema return undefined field value at initialization

Current Behavior

`<Formik initialValues={{ field: '', disable: true }}
validationSchema={yup.object().shape({
field: yup.string().when('disable', { is: value => {console.log(value); return value}, then: yup.string(), otherwise: yup.string() }) })} validateOnBlur

`

at least few times console.log return undefined. In preview version 1.5.8 always return initial value

Expected behavior

validation schema suppose to return value if initialized

Your environment

Software Version(s)
Formik 2.0.3
React 16.10.2
TypeScript 3.6.4
Browser opera
npm/Yarn 1.19.1
Operating System mac OS
sambrodriguez commented 4 years ago

This is due to a change implemented in this PR: #1740 I left a comment on it about this, but I'm not sure why this change was made. The only thing I could think of is if Yup had some strange behavior when passed an empty string, but I feel like that situation should be handled by the implementation, not Formik.

jaredpalmer commented 4 years ago

Can y’all submit a PR to fix?

sambrodriguez commented 4 years ago

I dug a bit deeper, and as mentioned in #1520 (the issue that lead to that PR) Yup doesn't like being passed an empty string when trying to set a min length for a string value. This means if you pass an empty string as the default value and it isn't transformed to undefined (as is currently happening in formik), all validation schema with a minimum length will fail even if the field isn't supposed to be required.

In previous versions of Formik, empty strings were only transformed for top level schema entries, so the current code is certainly better than that inconsistent behavior. However that makes 2.X have a breaking change for people like me that had tests depend on receiving an empty string in nested schema (even though the problem is fairly easily fixed). Changing Formik to not transform any empty strings to undefined would be a breaking change in the other direction, and would probably have a much larger impact so I don't think that's a good idea.

Perhaps this should be added as a breaking change in the Formik docs for upgrading to version 2 if no code changes come from this discussion?

Given this information, how would you like to proceed @jaredpalmer ?

yusufumac commented 4 years ago

Any update on this?

asnoeyink commented 4 years ago

Formik converting empty strings to undefined during the prepareDataForValidation function means that we can't use yup's .defined() check when the field value is "". This is causing issues for some of our form validation, is using an empty string as a value considered bad practice?

clawoflight commented 4 years ago

@sambrodriguez @jaredpalmer I have the same problem as @abs25.

The current behavior makes it impossible to allow empty strings in a yup validation schema, despite the fact that yup is plenty flexible enough to distinguish between undefined, null and '' independently. Please either document this properly and give a good reasoning, or rethink the implementation to allow empty strings.

clawoflight commented 4 years ago

Please, some maintainer reply here. You should either stop converting empty strings to undefined, or give us an alternative.

Using undefined for empty inputs is not acceptable in react, given that undefined is used to distinguish uncontrolled inputs from controlled ones!

clawoflight commented 3 years ago

Please react at least. We will be forced to fork if we do not get a response very soon.

maddhruv commented 3 years ago

I've raised a PR fixing the same - https://github.com/formium/formik/pull/2902

maddhruv commented 3 years ago

@clawoflight Thanks for your patience and cooperation, I have raised a PR which can be a solution to fixing this. Stay Tuned!

alxndrsn commented 2 years ago

I found the suggestion at https://github.com/jaredpalmer/formik/pull/2902#issuecomment-922492137 fixed this for me.