Checkbox input errors seems to 'lag' behind current values

Bug, Feature, or Question?

Let’s say I have a set of initial values that looks like this:

{ 
  email: '', 
  categories: { 
    foo: false
  } 
}

and I define a schema to validate that which looks like this:

Yup.object().shape({
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required!'),
  categories: Yup.object({
    'foo': Yup.boolean().is([true], 'Must be checked')
  })
})

When I go to submit that form, I should see errors that look something like this

"errors": {
  "email": "Email is required!",
  "categories": {
    "foo": "categories.foo must be one of the following values: true"
  }
}

If I then checked a checkbox input in my form with its name attribute set to categories.foo, I’d expect the errors to change to:

"errors": {
  "email": "Email is required!"
}

But right now that’s not the case.

Current Behavior

Currently the form’s errors don’t change, but when I uncheck the input, the error disappears. If I check the box again, the error reappears. However, if I check the checkbox, and then edit the email input on my form, both errors disappear. This is a little hard to explain, so I have a CodeSandbox example here:

Desired Behavior

I should see the expected validation errors based on my input being checked or unchecked.

Suggested Solutions

Info

• Formik Version: 0.11.0.beta.1
• OS: macOS 10.13.2
• Node Version: 9.3.0
• Package Manager and version: npm 5.6.0

[Dremora]

I have a very similar issue. But in my case the problem is not with onBlur (which is triggered). It seems that on change yup (or a validation function) receives a value of "on" rather than a boolean.

Checkboxes and radios in React use checked property and not value, and the library needs to check for event.target.checked rather than event.target.value.

[rhysforyou]

I’ve spent some more time digging into this and the underlying issue seems to be that checkboxes don’t emit blur or focus events, see this example Codepen. I’m not sure what the best workaround is, perhaps we could special-case the handling of change events for checkbox inputs to normalise their behaviour?