jquense / react-formal

Sophisticated HTML form management for React
http://jquense.github.io/react-formal
MIT License
526 stars 52 forks source link

Error messages disappear for <Field>s when at least 2 are conditionally required using `when..required()` #147

Closed antmdvs closed 6 years ago

antmdvs commented 6 years ago

I've identified a couple sequences of events that cause error messages to disappear when at least 2 fields are conditionally required, such as the ones described by the following schema and <Field>s:

const requiredStringWhenFirstHasValue = yup.string()
  .when('first', {
    is: val => val && val.length,
    then: yup.string().required(),
    otherwise: yup.string(),
  });

const validationSchema = yup.object({
  first: yup.string(),
  middle: requiredStringWhenFirstHasValue,
  last: requiredStringWhenFirstHasValue,
});
  <Form.Field name="first" />
  <Form.Field name="middle" />
  <Form.Field name="last" />

I can get this to happen with or without alsoValidates on the first field.

With alsoValidates

  1. Type a character in the first box. Validation messages appear on the other boxes.
  2. Tab into the middle box. Validation error goes away for the middle box.

Without alsoValidates

  1. Type a character in the first box
  2. Tab into the middle box.
  3. Tab into the last box. Validation error correctly appears for the middle box.
  4. Shift+Tab back to the middle box. Validation error correctly appears for the last box.
  5. Tab into the last box again.
  6. Hold Shift and press Tab twice in rapid succession. The validation message on last disappears.

This sandbox demonstrates the symptoms with repro steps: Edit react-formal and `when`

Any ideas?

jquense commented 6 years ago

looks like a bug, I think I see the issue

antmdvs commented 6 years ago

It looks like this has been fixed somewhere between 0.25.x and 0.28.1. The sandbox no longer exhibits these behaviors after updating the deps.