Extend formBuilderPlugin fields: not persist data

[matteo-naif]

Link to reproduction

Payload Version

3.0.0-beta.86

Node Version

v20

Next.js Version

15.0.0-canary.121

Describe the Bug

If I add a custom field in the plugin configuration, it displays correctly in the admin UI but the data is not persisted. If I add the "slug" property the data is persisted but there is a typescript error because is missing in the interface FieldConfig.

Reproduction Steps

1. Declare the custom field

import { fields, formBuilderPlugin } from "@payloadcms/plugin-form-builder";
import { Block } from "payload";

export const formBuilderPluginConfig = formBuilderPlugin({
    redirectRelationships: ["pages"],
    fields: {
        hidden: {
            // slug: "hidden", // <- With this prop works
            labels: {
                singular: 'Hidden',
                plural: 'Hidden'
            },
            fields: [
                ...(fields.text as Block).fields
                // Other fields
            ]
        }
    },
})

2. Open the Admin UI to add the custom field
3. Save
4. Data is not persisted

Adapters and Plugins

"@payloadcms/db-mongodb": "beta",     "@payloadcms/email-nodemailer": "beta",     "@payloadcms/next": "beta",     "@payloadcms/plugin-cloud-storage": "beta",     "@payloadcms/plugin-form-builder": "beta",     "@payloadcms/plugin-nested-docs": "beta",     "@payloadcms/plugin-seo": "beta",     "@payloadcms/richtext-lexical": "beta",     "@payloadcms/storage-s3": "beta",     "@payloadcms/ui": "beta",

[siobahnschuck]

@matteo-naif did you find a work around for this? running into this same issue currently. Also trying to add a custom "hidden" field to the formBuilder plugin.

[matteo-naif]

Hi @siobahnschuck, I paste my working example with minimal setup. At the moment the type FieldConfig still is missing the slug property.

import { formBuilderPlugin } from "@payloadcms/plugin-form-builder";
import { fields } from "@payloadcms/plugin-form-builder";
import { FieldConfig } from "@payloadcms/plugin-form-builder/types";
import { Block } from "payload";

export const textFields = (fields.text as Block).fields

export const InputHidden: FieldConfig = {
    // @ts-ignore
    slug: "hidden",
    labels: {
        singular: 'Hidden',
        plural: 'Hidden'
    },
    fields: [
        ...textFields
        // Other fields
    ]
};

export const formBuilderPluginConfig = formBuilderPlugin({
    redirectRelationships: ["pages"],
    fields: {
        hidden: InputHidden
    }
})

The result is the following:

[siobahnschuck]

@matteo-naif thank you so much! This works well 🌟