Nested field + reactive schema change doesn't validate

[9mm]

Versions

• vee-validate: latest
• vue: latest Vue 3

Describe the bug

It seems that reactive schemas work properly (passing a computed()) to validationSchema)... and also nested objects work properly, like fields.subfield), but it seems when both are combined the nested field isn't initially set to the proper valid. It does work however when typing into that nested input, but the initial value flag gets "stuck" at the initial schema. So an invalid field, which was valid for only a moment before the reactive schema updated, is incorrectly marked as valid.

I have code examples in the discussion, but I'm pretty sure it's a bug at this point so I'm putting it here.

code is located in the last reply here: #3283

Expected behavior

I would expect the valid flag to change appropriately for nested fields, just like non-nested fields do (whether schema changes reactively or not)

Here is the code again:

  setup(props, { emit }) {
    // originally property is {} empty, and comes in later as a prop when API resolves
    const schemaFields = computed(() => (
      Object.entries(props.property.schema.fields).map(([key, value]) => ({
        id: key,
        ...value,
      }))
    ));

    const buildValidations = computed(() => {
      const yupObject = schemaFields.value.reduce((acc, field) => {
        // build validations like .string().required.label()
        // ...
        acc[field.id] = validation;
        return acc;
      }, {});

      return object(yupObject);
    });

    // reactive schema
    const validationSchema = computed(() => (
      object({
        name: string().required().label('Name'),
        date: string().url().required().label('Date'),
        fields: buildValidations.value,
      })
    ));

    // we specifically don't pass the .value so veeValidate knows to update
    // the schema reactively
    const { handleSubmit, meta } = useForm({
      validationSchema,
    });

[logaretm]

Please create a working minimal reproduction of this, you can use codesandbox.

[9mm]

Code sandbox doesnt even work. A default vue 3 app fresh from their homepage generates...

InvalidCharacterError
Failed to execute 'createElement' on 'Document': The tag name provided ('%=') is not a valid name.

[9mm]

what a nightmare, luckily I could find their experimental node container version of vue3 which works... hopefully this is a real bug as this took hours to do 🥴

Step 1: go here

There are 2 API calls that happen in the outer component. The first is to fetch the schema for the dynamic form.

The 2nd API call is to populate the "user" object which has some static fields right on the user (name) as well as a fields key which inclues an arbitrary number of dynamic fields (dicated by the schema)

Step 2: notice that when the form loads, even though "Field Dos" has no key set in the user fields: {} object, it comes back as "valid". You can verify that the required() is not the culprit by focusing the mouse into input #2 and blurring. Now you will see it validates properly.

Step 3: To prove the "nested" portion of this, replace the 2nd API call with this one, where "name" is now commented out. Name is a 1st level field which is present at load time. You will notice now when the page loads the entire form loads as invalid (which is correct)

[logaretm]

Thank you, you could've set up a git repo with Vue-CLI as an alternative, sorry for not suggesting that.

So looking at your demo, it does indeed look like a bug caused by the partial schema being filled. apparently, validation is skipped for non-touched fields because the schema has already been run before. It's not related to nested fields.

This is of course not intended and I will tag a release for it shortly.

[logaretm]

Can you please verify if 4.3.4 fixes this?

[9mm]

Nice!!! That fixed it. Super awesome. Thanks 🙏🏼