Virtual Fields not updating

amifsud02last year

1 1

export const Pages: CollectionConfig = {
    slug: 'pages',
    admin: {
      useAsTitle: 'fullTitle',
      preview: doc => formatPreviewURL('pages', doc),
      defaultColumns: ['fullTitle', 'slug', 'createdAt', 'updatedAt'],
    },
    versions: {
      drafts: true,
    },
    access: {
      create: isAdmin,
      read: publishedOnly,
      readVersions: isAdmin,
      update: isAdmin,
      delete: isAdmin,
    },
    hooks: {
      afterChange: [
        ({ req: { payload }, doc }) => {
          revalidatePage({
            payload,
            collection: 'pages',
            doc,
          })
        },
      ],
    },
    fields: [
      {
        name: 'title',
        type: 'text',
        required: true,
      },
      fullTitle,
    ]
}

• Selected Answer
  

  jmikrut

  last year

  Can you share your fullTitle field?

  If it matches the exact field in our demo, then the full title will only populate once you save the document.

  If you want the title to populate from fullTitle as you type, then you will need to have a custom Field component that uses the form state and sets its own value based on when the title field changes.

  Notice how we have the field component disabled in our example:

  https://github.com/payloadcms/website-cms/blob/18748031b64941050fe1d4717963a94d9453e801/src/fields/fullTitle/index.ts#L13

  Just add a component which implements the useFormField hook to monitor the title value, and then use the useField hook to set the value of your fullTitle field as the title field changes!

  But, this isn't an issue with Payload (v2 or v3) so I'll convert it into a Q&A discussion so others can find this info as well. Thanks for bringing this up!