advanced patterns with Formik and Yup validation not triggering on blur for nested fields
Hey everyone, I'm running into an issue that's driving me crazy. I'm a bit lost with I'm not sure how to approach I'm optimizing some code but I've searched everywhere and can't find a clear answer... Hey everyone, I'm running into an issue that's driving me crazy. I'm working with an scenario with Formik (v2.2.6) where the validation using Yup (v0.32.9) isn't triggering on blur for nested fields. I have a form with a nested object structure for user details, and while the top-level fields validate correctly, the nested fields seem to ignore the `validateOnBlur` setting. Here’s a simplified version of my form setup: ```javascript import React from 'react'; import { Formik, Field, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const validationSchema = Yup.object({ user: Yup.object({ name: Yup.string().required('Name is required'), email: Yup.string().email('Invalid email format').required('Email is required'), }), }); const MyForm = () => { return ( <Formik initialValues={{ user: { name: '', email: '' } }} validationSchema={validationSchema} validateOnBlur={true} onSubmit={(values) => { console.log(values); }} > <Form> <div> <label>Name:</label> <Field name="user.name" /> <ErrorMessage name="user.name" component="div" /> </div> <div> <label>Email:</label> <Field name="user.email" /> <ErrorMessage name="user.email" component="div" /> </div> <button type="submit">Submit</button> </Form> </Formik> ); }; export default MyForm; ``` When I interact with the fields, the validation for `user.name` seems to work on blur, but `user.email` does not. I’ve checked the `validateOnBlur` prop, and it’s set to true, yet I'm not seeing the behavior message for the email field if I leave it empty and click away. I’ve also tried using `setTouched` manually in the `onBlur` event, but that didn’t change anything. Could there be something specific about how nested fields are set up in Formik that I’m missing? Any thoughts on how to ensure that validation triggers correctly for nested fields on blur? Thanks in advance! I'm working on a application that needs to handle this. Any examples would be super helpful. Is there a better approach? My development environment is Ubuntu 22.04.