Formik: Dynamic Form Field Validation Not Triggering on Value Change
I'm converting an old project and After trying multiple solutions online, I still can't figure this out... I'm stuck on something that should probably be simple... I'm using Formik (version 2.2.6) to manage a dynamic form with fields that can be added or removed based on user input. I've set up validation using Yup (version 0.32.9) to ensure that certain fields are required based on the presence of other fields. However, I'm running into an scenario where the validation for newly added fields does not trigger upon their value change. 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().shape({ fields: Yup.array().of(Yup.string().required('This field is required')), }); const MyDynamicForm = () => { return ( <Formik initialValues={{ fields: [''] }} validationSchema={validationSchema} onSubmit={values => console.log(values)} > {({ values, setFieldValue }) => ( <Form> {values.fields.map((field, index) => ( <div key={index}> <Field name={`fields[${index}]`} /> <ErrorMessage name={`fields[${index}]`} component="div" /> <button type="button" onClick={() => setFieldValue('fields', [...values.fields, ''])}>Add Field</button> </div> ))} <button type="submit">Submit</button> </Form> )} </Formik> ); }; ``` I’ve tried to debug by logging values and checking the validation state, but it seems like the validation doesn’t get triggered for newly added fields until I focus out of them. I’m expecting validation to occur immediately when the user types into these fields. How can I resolve this and ensure that validation gets triggered on every input change? Any suggestions would be greatly appreciated! This is part of a larger REST API I'm building. What's the correct way to implement this? I'm developing on macOS with Javascript. Any pointers in the right direction?