Skip to content

[BUG] Array field type with hidden status and minItems blocks the form submission #166

Description

@MurzNN

Describe the bug
If I add to the form an Array field type with minIntems > 0 and hide it, it blocks the form submission without any errors.

To Reproduce
Here is a code that reproduces the issue:

"use client";

import { defineSchema, type InferType } from "@buildnbuzz/form-react";
import {
  Form,
  FormContent,
  FormFields,
  FormSubmit,
} from "@/components/buzzform/form";
import { ComponentProps, useState } from "react";

const schema = defineSchema({
  fields: [
    {
      type: "text",
      name: "myText",
      defaultValue: "foo",
      required: true,
    },
    {
      type: "array",
      name: "contacts",
      label: `Contacts`,
      minItems: 1,
      fields: [
        {
          type: "row",
          fields: [
            {
              type: "text",
              name: "phone",
            },
          ],
        },
      ],
      // Hiding the field triggers the bug,
      hidden: true,
    },
  ],
});

type FormData = InferType<typeof schema.fields>;

export function MyForm(props?: ComponentProps<typeof Form>) {
  const [submittedData, setSubmittedData] = useState<FormData | null>(null);
  const handleSubmit = (data: FormData) => {
    console.log("Form submitted with data:", data);
    setSubmittedData(data.value);
  };

  return (
    <>
      <div>
        <Form schema={schema} onSubmit={handleSubmit} {...props}>
          <FormContent>
            <FormFields />
            <FormSubmit>Submit</FormSubmit>
          </FormContent>
        </Form>
      </div>
      <div>
        <pre>{JSON.stringify(submittedData, null, 2)}</pre>
      </div>
    </>
  );
}

Having this form, if you click "Submit", the button just become disabled, but the handleSubmit() is not called.

The option hidden: true triggers the bug, if I remove it and fill up at least 1 item, everything works well.

Expected behavior
When I click "Submit" the submission value should show up.

Environment (please complete the following information):

  • OS: Linux
  • Browser: Floorp
  • @buildnbuzz/form-core@0.1.9
  • @buildnbuzz/form-react@0.1.11

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions