Virtual Fields not updating

[amifsud02]

I created a virtual field based off Payload's Repo.

The page title should be populated automatically. This works find when having the useAsTitle: 'title' but does not work with fullTitle given that it is a virtual field.

Pages.ts Code

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,
    ]
}

[jmikrut]

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!