How to use a nested field within custom component?

[revnelson]

I want to make a custom component for a block to select options. When editing the block, the goal is to have a Settings icon that opens a popover panel with options in that panel. In the block, I have an options group that has many fields within it. Some fields are quite simple like checkboxes that I can make on my own. One of the more complicated fields is a relationship field. The @payloadcms/ui package exports a RelationshipField component that I would love to use so I don't need to roll my own logic for fetching/filtering/displaying possible documents.

The issue I've run into is that the exported fields from the UI package don't take the passed path internally. What these fields do internally is get the path from context, but because I've set the custom component as the options group, that is the path these Fields will use. So when I select a document from the RelationshipField and try to save the document, I get an error because it's trying to set the { relationTo: COLLECTION_SLUG, value: DOCUMENT_ID } as the value of the group.

I've opened an issue here, but have since noticed it in other fields such as the CheckboxField. Because this seems to be the way these Fields work by-and-large, I'm wondering if I'm missing something or what the best way is to nest un-modified field components within my custom component?

Code for reference:

Block config group where custom component is defined:

import { blockStyling } from "./styling"
import { blockVisibility } from "./blockVisibility"

import type { Field } from "payload"
import type { BlockOptions } from "~cms/types/generated"

export const blockOptions: (defaults?: Partial<BlockOptions>) => Field = (
	defaults
) => ({
	name: "blockOptions",
	label: false,
	type: "group",
	interfaceName: "BlockOptions",
	admin: {
		components: {
			Field: "/blocks/blockOptions/styling/component"
		}
	},
	fields: [
		blockStyling(),
		blockVisibility,
		{
			name: "anchorId",
			type: "text",
			admin: {
				description:
					"Add an anchor ID to this container to link to it from another part of the page."
			}
		}
	]
})

Block Visibility group config with the relationship field:

import { timeFilter } from "~cms/fields/timeFilter"

import type { GroupField, SelectField } from "payload"

export const showAt: SelectField = {
	name: "showAt",
	type: "select",
	options: [
		{ label: "Small", value: "sm" },
		{ label: "Medium", value: "md" },
		{ label: "Large", value: "lg" }
	]
}

export const hideAt: SelectField = {
	name: "hideAt",
	type: "select",
	options: [
		{ label: "Small", value: "sm" },
		{ label: "Medium", value: "md" },
		{ label: "Large", value: "lg" }
	]
}

export const blockVisibility: GroupField = {
	name: "visibility",
	type: "group",
	fields: [
		{ name: "active", type: "checkbox", defaultValue: true },
		showAt,
		hideAt,
		{
			name: "showIn",
			label: "Show in...",
			type: "relationship",
			relationTo: ["pages"],
			hasMany: true,
			maxDepth: 0
		},
		timeFilter
	]
}

Visibility custom component where @payloadcms/ui RelationshipField is used:

"use client"
import React from "react"
import {
	CheckboxInput,
	SelectInput,
	RelationshipField,
	useField,
	useFieldProps
} from "@payloadcms/ui"
import { Eye, EyeOff } from "lucide-react"

import {
	Popover,
	PopoverContent,
	PopoverTrigger
} from "~/components/ui/popover"
import { PayloadTooltip } from "~cms/components/tooltip"
import { hideAt, showAt } from "~cms/blocks/blockOptions/blockVisibility"

import type { OptionObject } from "payload"

export const Visibility = () => {
	const { path: parentPath } = useFieldProps()

	const showAtField = useField<string>({
		path: `${parentPath}.visibility.showAt`
	})
	const hideAtField = useField<string>({
		path: `${parentPath}.visibility.hideAt`
	})
	const activeField = useField<boolean>({
		path: `${parentPath}.visibility.active`
	})
	const showInField = useField({
		path: `${parentPath}.visibility.showIn`
	})

	return (
		<>
			<Popover modal>
				<PopoverTrigger title="Visibility">
					{activeField.value ? (
						<Eye strokeWidth={1} className="w-6 h-6" />
					) : (
						<EyeOff strokeWidth={1} className="w-6 h-6" />
					)}
				</PopoverTrigger>

				<PopoverContent className="flex flex-col gap-6 border-muted-offset w-fit min-w-96">
					{/* Blank Tooltip to prevent first tooltip opening when popover opens */}
					<PayloadTooltip dummy />

					<div className="flex items-center justify-between">
						<label className="flex items-center gap-2 text-sm font-medium text-foreground">
							Active
							<PayloadTooltip className="text-center">
								<p>Uncheck to hide this block.</p>
								<p className="pt-4">
									This can be used to prepare a block for future use, or to hide
									a block that is not yet ready to be displayed.
								</p>
							</PayloadTooltip>
						</label>
						<CheckboxInput
							checked={!!activeField.value}
							onToggle={(e) => {
								activeField.setValue(e.target.checked)
							}}
						/>
					</div>

					<div className="flex items-center justify-between pt-4 border-t">
						<label className="flex items-center gap-2 text-sm font-medium text-foreground">
							Show At
							<PayloadTooltip className="text-center">
								<p>
									If set, this block will be hidden for screen sizes smaller
									than the selection.
								</p>

								<p>
									i.e. If you select &quot;Medium&quot;, the block will be
									hidden for Mobile screen sizes, but will be visible for Tablet
									and Desktop screen sizes.
								</p>
							</PayloadTooltip>
						</label>
						<SelectInput
							path={showAtField.path}
							name="showAt"
							value={showAtField.value}
							options={showAt.options as OptionObject[]}
							onChange={(e: any) => {
								const value = e?.value

								showAtField.setValue(value)
							}}
						/>
					</div>

					<div className="flex items-center justify-between">
						<label className="flex items-center gap-2 text-sm font-medium text-foreground">
							Hide At
							<PayloadTooltip className="text-center">
								<p>
									If set, this block will be hidden for the screen size selected
									and any larger screen sizes.
								</p>

								<p>
									i.e. If you select &quot;Medium&quot;, the block will be
									hidden for Tablet and Desktop screen sizes.
								</p>
							</PayloadTooltip>
						</label>
						<SelectInput
							path={hideAtField.path}
							name="hideAt"
							value={hideAtField.value}
							options={hideAt.options as OptionObject[]}
							onChange={(e: any) => {
								const value = e?.value

								hideAtField.setValue(value)
							}}
						/>
					</div>

					<div className="flex items-center justify-between pt-4 border-t">
						<label className="flex items-center gap-2 text-sm font-medium text-foreground">
							Show In
							<PayloadTooltip className="text-center">
								<p>
									If set, this block will be hidden for screen sizes smaller
									than the selection.
								</p>

								<p>
									i.e. If you select &quot;Medium&quot;, the block will be
									hidden for Mobile screen sizes, but will be visible for Tablet
									and Desktop screen sizes.
								</p>
							</PayloadTooltip>
						</label>
						<RelationshipField
							field={{
								_path: showInField.path,
								relationTo: ["pages"],
								hasMany: true,
								name: "showIn"
							}}
							// name="showAt"
							// value={showAtField.value}
							// options={showAt.options as OptionObject[]}
							// onChange={(e: any) => {
							// 	const value = e?.value

							// 	showAtField.setValue(value)
							// }}
						/>
					</div>
				</PopoverContent>
			</Popover>
		</>
	)
}

After selecting a page from the RelationshipField dropdown and trying to save the document, this error is printed in the console:

[12:11:50] ERROR: CastError: Cast to embedded failed for value "{
  id: '67200e588c764634e6c7f4f1',
  blockType: 'Test',
  blockOptions: [ { relationTo: 'pages', value: '67003d766ce285bf7fae1cd0' } ]
}" (type Object) at path "sections" because of "CastError"