Validation error not cleared in custom array field component using useControl

[armel-zeli-minlay]

Describe the bug and the expected behavior

Hi 👋 and thanks a lot for Conform — it's a fantastic form library and a pleasure to work with!

I'm encountering an issue with custom input components and nested object validation, and I’m not sure if I’m missing something or hitting a limitation.

---

❓ Context

I’m building a multi-step form using Conform.

One of my steps handles a preferences object, validated via Zod.

Inside it, there's a conditional field: preferences.emails, which becomes required if preferences.notificationTerminee is true.

The field is handled via a custom component (MultipleEmailField) using unstable_useControl.

Conform version

v1.0.0

Steps to Reproduce the Bug or Issue

🔧 Setup summary

1. Schema

export const preferencesSchema = z
  .object({
    notificationTerminee: z.enum(["true", "false"]).transform((v) => v === "true"),
    emails: z.array(z.string().email("Invalid email address")),
  })
  .superRefine((data, ctx) => {
    console.log("validate preferences", data.emails);
    if (data.notificationTerminee) {
      if (data.emails.length === 0) {
        ctx.addIssue({
          path: ["emails"],
          code: z.ZodIssueCode.custom,
          message: "An email is required",
        });
      }
    }
  });

2 Relevant parts of MultipleEmailField.tsx

const control = useControl(meta);

const rawValue = control.value;
const values =
  typeof rawValue === "string"
    ? [rawValue]
    : Array.isArray(rawValue)
      ? rawValue
      : [];

const addValue = () => {
  const trimmed = inputValue.trim();
  setHasTriedSubmit(true);

  if (!isValidEmail(trimmed)) {
    setInputError("L'adresse email est invalide");
    return;
  }

  if (trimmed && !values.includes(trimmed)) {
    const newValues = [...values, trimmed];
    console.log(newValues);
    control.change(newValues);

    // Tried these with no effect:
    // form.update({ preferences: { emails: newValues } });
    // control.blur();
    // manually dispatching 'blur' on <select>
  }

  setInputError("");
  setInputValue("");
  setHasTriedSubmit(false);
};

<select
  multiple
  name={meta.name}
  id={meta.id}
  ref={control.register}
  className="sr-only"
  tabIndex={-1}
  value={values}
>
  {values.map((value) => (
    <option key={value} value={value}>
      {value}
    </option>
  ))}
</select>

3. In my parent component:

const [form] = useForm({
  id: formId,
  defaultValue: { [currentStep.key]: currentStepData },
  onValidate({ formData }) {
    return parseWithZod(formData, { schema: currentStep.schema });
  },
  shouldValidate: "onBlur",
  shouldRevalidate: "onInput",
});

---

🧪 Problem

When submitting the step with notificationTerminee = true and emails = [], the error appears correctly.

If I then add an email (control.change([...])), even with:

• form.update({ preferences: { emails: [...] } })
• triggering blur manually on the <select> element
• calling control.blur()

➡️ The validation does not re-run, and the error does not disappear — even though the field now has a valid value.

This log shows the correct update is being sent:

__intent__: {
  "type": "update",
  "payload": {
    "preferences": {
      "notificationTerminee": true,
      "emails": ["test@test.com"]
    }
  }
}

But in the superRefine logs:

validate preferences []

So emails is somehow still seen as empty.

---

🧪 Additional Observations

• After submitting the form with emails = [] and getting the expected error:
  • If I add one email, the error remains, and validate preferences [] still logs an empty array.
  • If I then add a second email, the array suddenly becomes populated and the validation succeeds.
• Similarly, if I manually trigger validation on another field (e.g. toggling a SwitchField), or if I re-submit the form, the emails array is correctly seen as filled and the error disappears.
• So the values are there, but Conform/Zod doesn’t seem to see them until some extra interaction occurs.

---

🙏 Help requested

• Am I misunderstanding how to trigger validation properly for nested fields inside an object?
• Is this a bug, or do I need to change how I'm structuring form.update() / control.change() calls?

Thanks again for your work — the dev experience with Conform is great !

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[edmundhung]

Hi @armel-zeli-minlay,

I am guessing the issue you had was because of the select not have the corresponding option to reflect the value you passed to control.change() as Conform will instruct the DOM to update the selected options but it fails to find any option matching the trimmed email.

The solution here might be just updated to v1.4 as I have just optimized the unstable_useControl hook to dynamically insert an option for you if the option is not available. Before v1.4, you will have to pre-populate the option in the select, which could be tricky as the value seems to be dynamic in your case.

Hope that helps!

[armel-zeli-minlay]

Hi again @edmundhung 👋

Thanks a lot for your detailed answer — and for the incredible quality of Conform, it's been a real pleasure working with it 👏

We eventually decided to go with a slightly different approach using getFieldList() and form.insert.getButtonProps() — which feels very natural with Conform's intent system.

Here’s the full implementation we ended up with:

"use client";

[...]
import { FieldMetadata, FormId, useFormMetadata } from "@conform-to/react";
[...]

interface MultipleEmailFieldProps {
  meta: FieldMetadata<string[]>;
  label?: string;
  placeholder?: string;
  formId: FormId<createLaboratorySchemaType>;
}

export default function MultipleEmailField({
  meta,
  label = "Emails de notification",
  placeholder = "Ajouter un email",
  formId,
}: MultipleEmailFieldProps) {
  const form = useFormMetadata(formId);
  const emails = meta.getFieldList();

  console.log({ emails });

  const [inputValue, setInputValue] = useState("");
  const [inputError, setInputError] = useState("");

  const insertRef = useRef<HTMLButtonElement>(null);

  const isValidEmail = (email: string) =>
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const handleAdd = () => {
    const trimmed = inputValue.trim();

    if (!isValidEmail(trimmed)) {
      setInputError("L'adresse email est invalide");
      return;
    }

    setInputError("");

    // Create dynamically hidden email fields
    const hiddenInput = document.createElement("input");
    hiddenInput.type = "hidden";
    hiddenInput.name = `${meta.name}[${emails.length}]`;
    hiddenInput.value = trimmed;

    const formElement = insertRef.current?.form;
    if (!formElement) return;

    formElement.appendChild(hiddenInput);
    insertRef.current?.click();
    formElement.removeChild(hiddenInput);

    setInputValue("");
  };

  return (
    <div className="space-y-2">
      {label && <label className="block text-sm font-medium">{label}</label>}

      <div className="flex gap-2">
        <Input
          type="email"
          value={inputValue}
          placeholder={placeholder}
          onChange={(e) => {
            setInputValue(e.target.value);
            setInputError("");
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              handleAdd();
            }
          }}
          aria-invalid={!!inputError}
          className="w-[250px]"
        />
        <Button type="button" onClick={handleAdd}>
          Ajouter
        </Button>
        <button
          type="submit"
          ref={insertRef}
          {...form.insert.getButtonProps({ name: meta.name })}
          className="hidden"
        />
      </div>

      {inputError && <ErrorField message={inputError} />}
      {meta.errors && typeof meta.errors === "string" && (
        <ErrorField message={meta.errors} />
      )}

      <ul className="flex flex-wrap gap-2">
        {emails.map((emailField, index) => (
          <li
            key={emailField.key}
            className="flex items-center gap-1 bg-muted px-2 py-1 rounded-full"
          >
            <input
              type="hidden"
              name={emailField.name}
              value={emailField.value}
            />
            <span className="text-sm">{emailField.value}</span>
            <button
              type="submit"
              {...form.remove.getButtonProps({
                name: meta.name,
                index,
              })}
            >
              <X size={14} className="cursor-pointer text-gray-900" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}