Formik + Yup + ReactQuill: Error message doesn't display

[lucassardois]

Hello,

I have a problem with Formik, Yup and ReactQuill: I have the following code with my ReactQuill component working but for some reason errors messages send by Yup are never shown, like if ReactQuill and Formik value aren't synced. When I submit the form I correctly see the ReactQuill values trough.

Yup schema:

const schema = Yup.object().shape({
  long_description: Yup.string()
    .required()
})

Formik & ReactQuill:

<Formik
    initialValues={{
    name: '',
    image: '',
    short_description: '',
    long_description: '',
    latitude: '',
    longitude: '',
    categories: []
    }}
    validationSchema={schema}
    onSubmit={values => {
    console.log(values)
    }}
>
    {({
    handleSubmit,
    handleChange,
    handleBlur,
    values,
    errors,
    touched
    }) => (
        <Form noValidate onSubmit={handleSubmit}>
            <Form.Group>
            <Form.Label>Longue description</Form.Label>
            <Field name='long_description'>
                {({ field }) =>
                <ReactQuill
                    defaultValue={field.value}
                    value={field.value}
                    onChange={field.onChange(field.name)} 
                    onBlur={field.onBlur(field.name)}
                    rows="5"
                    modules={{ toolbar: toolbarOptions }}
                />
                }
            </Field>
            <Form.Control.Feedback type="invalid">
                <ErrorMessage name='long_description' />
            </Form.Control.Feedback>
            </Form.Group>   <Form noValidate onSubmit={handleSubmit}>
        </Form>
    )
</Formik>

[quentingirard]

You have to set message in required

const schema = Yup.object().shape({long_description: Yup.string().required("My message")})

[mrvisser]

I think you'd want something a little more sophisticated than required(), because anything that isn't a vanilla field will almost always at least have an empty paragraph tag in it as a string.

A custom validator using addMethod is probably better, something that validates like this:

const content = new DOMParser().parseFromString(value, 'text/html')?.body.textContent?.trim() ?? '';
if (content === '') {
  // Field is empty
} else {
  // Field has text content
}