payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
25.72k stars 1.64k forks source link

props.admin.custom not passed to custom Field props. #8267

Closed aus closed 2 months ago

aus commented 2 months ago

Link to reproduction

No response

Environment Info

Node.js v22.8.0

Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.10.0
Relevant Packages:
  payload: 3.0.0-beta.104
  next: 15.0.0-canary.104
  @payloadcms/email-nodemailer: 3.0.0-beta.104
  @payloadcms/graphql: 3.0.0-beta.104
  @payloadcms/next/utilities: 3.0.0-beta.104
  @payloadcms/plugin-cloud: 3.0.0-beta.104
  @payloadcms/richtext-lexical: 3.0.0-beta.104
  @payloadcms/translations: 3.0.0-beta.104
  @payloadcms/ui/shared: 3.0.0-beta.104
  react: 19.0.0-rc-206df66e-20240912
  react-dom: 19.0.0-rc-206df66e-20240912
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:00 PDT 2024; root:xnu-10063.141.2~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12

Describe the Bug

props.admin.custom not passed to custom Field props. It's unclear whether this is intended behavior.

Reproduction Steps

src/app/collections/Posts.ts

import type { CollectionConfig } from "payload";

export const Posts: CollectionConfig = {
  slug: "posts",
  fields: [
    {
      name: "slug",
      type: "text",
      custom: {
        foo: "bar",
      },
      admin: {
        components: {
          Field: "src/collections/fields/slug/Field#SlugInputField",
          Label: "src/collections/fields/slug/Label#SlugInputLabel",
        },
      },
    },
  ],
};

src/collections/fields/slug/Field.tsx

"use client";
import { TextInputProps, useField, useFormFields } from "@payloadcms/ui";

export const SlugInputField: React.FC<TextInputProps> = (props) => {
  // props.field.admin.custom is undefined
  console.log(`props: ${JSON.stringify(props, null, 2)}`);
  return <div>foobar</div>;
};

Output:

{
  "field": {
    "name": "slug",
    "type": "text",
    "admin": {
      "components": {
        "Field": { "type": "client", "props": {} },
        "Label": { "type": "client", "props": {} }
      },
      "style": { "flex": "1 1 auto" }
    },
    "label": "Slug",
    "_schemaPath": "slug"
  },
  "forceRender": true
}

Adapters and Plugins

No response

aus commented 2 months ago

I see now that you can pass props using:

admin: {
  components: {
    Field: {
      path: "path/to/field",
      clientProps: { foo: "bar" },
    },
  }
}
github-actions[bot] commented 2 months ago

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.