useFieldArray validation issue + upgrade problem with form.handleSubmit

[thibautvs]

Hi everyone,

Using vee-validate 4.13.2, I'm having an issue with the validations using useFieldArray. When I have two rows of inputs and I delete the 1st row, validation errors don't show, but however they do show when I delete the 2nd row instead of the 1st one. Looks like a reactivity problem with the indexes. Anyone encountered this issue? Here's some relevant snippets:

<div v-for="(powerInverter, index) in fields" :key="`${props.name}[${index}]`">
  ...
  <text-box
    v-model="powerInverter.value.brand"
    :max-length="35"
    :name="`${props.name}[${index}].brand`"
    :placeholder="t('prosumerDeclaration.installation.brand')"
    required
  />
  ...
  <Button
    :label="t('common.remove')"
    icon="fas fa-trash"
    is-icon
    size="md"
    @click="removePowerInverter(index)"
  />

defineModel<PowerInverter[]>({ required: true })

const form = inject(veeValidateFormKey)!

const { fields, remove, push } = useFieldArray<PowerInverter>(props.name)

useField<PowerInverter[]>(props.name, undefined, {
  keepValueOnUnmount: false,
  syncVModel: true
})

function addPowerInverter() {
  push(new PowerInverter())
}

function removePowerInverter(index: number) {
  remove(index)

  setTimeout(() => {
    form.validate()
  }, 50)
}

So naturally, I thought about upgrading to the latest version (4.14.7 at the time of writing), but then my forms simply won't submit. The following code in the function simply won't run:

const identify = form!.handleSubmit(async () => {
  // console.log('in') doesn't print anything
})

Any suggestions?

Thanks in advance!

[thibautvs]

Hello,

Any idea regarding this problem?

Thanks in advance