Version: 5.1.5

Hello, I’m trying to make dynamic lists with useFieldArray of remix-validated-form.

What I want is to revalidate all of the fields within a form when one of the fields is removed.

The given validator checks if there are any pairs of fields with duplicated values.

When one of the duplicated field is removed, the other should be revalidated and its error needs to disappear.

However, with my code below, the error remains even after one of the duplicated field is removed, and I can’t figure out how to fire revalidation.

Is there any solution to this?

Although revalidation fires as I expect when I add type="submit" attribute to the remove button, I don’t want to do that

Thank you.

const validator = zfd.formData({
  todos: z.array(z.string().min(1)).superRefine((items, ctx) => {
    items.forEach((item, index) => {
      const isDuplicated = items.filter((id) => id === item).length > 1
      if (isDuplicated) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          path: [index],
        })
      }
    })
  }),
})

const [items, { push, remove }] = useFieldArray<string>(
  'todos',
  { formId: FORM_ID },
)

 <ValidatedForm
    validator={withZod(addCheckupTypesValidator)}
    id={FORM_ID}
    onSubmit={handleAddIds}
  >
    <div>
      {items.map(({ key }, index) => (
        <div key={key}>
          <MyInput label="todo" name={`todos[${index}]`} />
          <button onClick={() => remove(index)}>remove</button>
        </div>
      ))}
      <button type="button" onClick={() => push('')}>
        add
      </button>
    </div>
</ValidatedForm>

const MyInput = ({ name, label }: { name: string; label: string }) => {
  const { error, getInputProps } = useField(name)
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input {...getInputProps({ id: name })} />
      {error && <span className="my-error-class">{error}</span>}
    </div>
  )
}