Formik: Checkbox input errors seems to 'lag' behind current values

[rhysforyou]

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

[jaredpalmer]

Hrmmm

[jaredpalmer]

Will take a look later today

[rhysforyou]

Thanks, I might have time to take a look myself later, but for now I’m just going to “flatten” my values object and see if that works around it

[rhysforyou]

on further exploration, this affects boolean / checkbox fields that aren't nested as well

[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?

[rhysforyou]

I've also updated this issue's title to indicate that this bug isn't specific to the latest beta.

[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]

Just wanted to say this seems to be fixed as of 0.11.10. I'm closing this issue.