fix(ui): stale paths on custom components within rows (#11973)

When server rendering custom components within form state, those
components receive a path that is correct at render time, but
potentially stale after manipulating array and blocks rows. This causes
the field to briefly render incorrect values while the form state
request is in flight.

The reason for this is that paths are passed as a prop statically into
those components. Then when we manipulate rows, form state is modified,
potentially changing field paths. The component's `path` prop, however,
hasn't changed. This means it temporarily points to the wrong field in
form state, rendering the data of another row until the server responds
with a freshly rendered component.

This is not an issue with default Payload fields as they are rendered on
the client and can be passed dynamic props.

This is only an issue within custom server components, including rich
text fields which are treated as custom components. Since they are
rendered on the server and passed to the client, props are inaccessible
after render.

The fix for this is to provide paths dynamically through context. This
way as we make changes to form state, there is a mechanism in which
server components can receive the updated path without waiting on its
props to update.

Author: jacobsfletch

packages/plugin-import-export/src/components/FieldsToExport/index.tsx

@@ -20,8 +20,7 @@ const baseClass = 'fields-to-export'
 
 export const FieldsToExport: SelectFieldClientComponent = (props) => {
   const { id } = useDocumentInfo()
-  const { path } = props
-  const { setValue, value } = useField<string[]>({ path })
+  const { setValue, value } = useField<string[]>()
   const { value: collectionSlug } = useField<string>({ path: 'collectionSlug' })
   const { getEntityConfig } = useConfig()
   const { collection } = useImportExport()

packages/plugin-import-export/src/components/SortBy/index.tsx

@@ -20,12 +20,12 @@ const baseClass = 'sort-by-fields'
 
 export const SortBy: SelectFieldClientComponent = (props) => {
   const { id } = useDocumentInfo()
-  const { path } = props
-  const { setValue, value } = useField<string>({ path })
+  const { setValue, value } = useField<string>()
   const { value: collectionSlug } = useField<string>({ path: 'collectionSlug' })
   const { query } = useListQuery()
   const { getEntityConfig } = useConfig()
   const { collection } = useImportExport()
+
   const [displayedValue, setDisplayedValue] = useState<{
     id: string
     label: ReactNode

packages/plugin-import-export/src/components/WhereField/index.tsx

@@ -11,6 +11,7 @@ export const WhereField: React.FC = () => {
   const { setValue: setSelectionToUseValue, value: selectionToUseValue } = useField({
     path: 'selectionToUse',
   })
+
   const { setValue } = useField({ path: 'where' })
   const { selectAll, selected } = useSelection()
   const { query } = useListQuery()

packages/plugin-multi-tenant/src/components/TenantField/index.client.tsx

@@ -16,8 +16,8 @@ type Props = {
 } & RelationshipFieldClientProps
 
 export const TenantField = (args: Props) => {
-  const { debug, path, unique } = args
-  const { setValue, value } = useField<number | string>({ path })
+  const { debug, unique } = args
+  const { setValue, value } = useField<number | string>()
   const { options, selectedTenantID, setPreventRefreshOnChange, setTenant } = useTenantSelection()
 
   const hasSetValueRef = React.useRef(false)

packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FieldType, Options } from '@payloadcms/ui'
+import type { FieldType } from '@payloadcms/ui'
 import type { TextareaFieldClientProps } from 'payload'
 
 import {
@@ -38,7 +38,6 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
       required,
     },
     hasGenerateDescriptionFn,
-    path,
     readOnly,
   } = props
 
@@ -58,12 +57,14 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
   const maxLength = maxLengthFromProps || maxLengthDefault
   const minLength = minLengthFromProps || minLengthDefault
 
-  const { customComponents, errorMessage, setValue, showError, value }: FieldType<string> =
-    useField({
-      path,
-    } as Options)
-
-  const { AfterInput, BeforeInput, Label } = customComponents ?? {}
+  const {
+    customComponents: { AfterInput, BeforeInput, Label } = {},
+    errorMessage,
+    path,
+    setValue,
+    showError,
+    value,
+  }: FieldType<string> = useField()
 
   const regenerateDescription = useCallback(async () => {
     if (!hasGenerateDescriptionFn) {

packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FieldType, Options } from '@payloadcms/ui'
+import type { FieldType } from '@payloadcms/ui'
 import type { UploadFieldClientProps } from 'payload'
 
 import {
@@ -30,9 +30,8 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
   const {
     field: { label, localized, relationTo, required },
     hasGenerateImageFn,
-    path,
     readOnly,
-  } = props || {}
+  } = props
 
   const {
     config: {
@@ -42,19 +41,21 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
     getEntityConfig,
   } = useConfig()
 
-  const field: FieldType<string> = useField({ ...props, path } as Options)
-  const { customComponents } = field
-
-  const { Error, Label } = customComponents ?? {}
+  const {
+    customComponents: { Error, Label } = {},
+    filterOptions,
+    path,
+    setValue,
+    showError,
+    value,
+  }: FieldType<string> = useField()
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
   const locale = useLocale()
   const { getData } = useForm()
   const docInfo = useDocumentInfo()
 
-  const { setValue, showError, value } = field
-
   const regenerateImage = useCallback(async () => {
     if (!hasGenerateImageFn) {
       return
@@ -174,7 +175,7 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
           api={api}
           collection={collection}
           Error={Error}
-          filterOptions={field.filterOptions}
+          filterOptions={filterOptions}
           onChange={(incomingImage) => {
             if (incomingImage !== null) {
               if (typeof incomingImage === 'object') {

packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FieldType, Options } from '@payloadcms/ui'
+import type { FieldType } from '@payloadcms/ui'
 import type { TextFieldClientProps } from 'payload'
 
 import {
@@ -33,9 +33,8 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
   const {
     field: { label, maxLength: maxLengthFromProps, minLength: minLengthFromProps, required },
     hasGenerateTitleFn,
-    path,
     readOnly,
-  } = props || {}
+  } = props
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
@@ -46,8 +45,14 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
     },
   } = useConfig()
 
-  const field: FieldType<string> = useField({ path } as Options)
-  const { customComponents: { AfterInput, BeforeInput, Label } = {} } = field
+  const {
+    customComponents: { AfterInput, BeforeInput, Label } = {},
+    errorMessage,
+    path,
+    setValue,
+    showError,
+    value,
+  }: FieldType<string> = useField()
 
   const locale = useLocale()
   const { getData } = useForm()
@@ -56,8 +61,6 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
   const minLength = minLengthFromProps || minLengthDefault
   const maxLength = maxLengthFromProps || maxLengthDefault
 
-  const { errorMessage, setValue, showError, value } = field
-
   const regenerateTitle = useCallback(async () => {
     if (!hasGenerateTitleFn) {
       return

packages/richtext-lexical/src/field/Field.tsx

@@ -36,7 +36,6 @@ const RichTextComponent: React.FC<
     editorConfig,
     field,
     field: {
-      name,
       admin: { className, description, readOnly: readOnlyFromAdmin } = {},
       label,
       localized,
@@ -48,7 +47,6 @@ const RichTextComponent: React.FC<
   } = props
 
   const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin
-  const path = pathFromProps ?? name
 
   const editDepth = useEditDepth()
 
@@ -70,11 +68,12 @@ const RichTextComponent: React.FC<
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
     disabled: disabledFromField,
     initialValue,
+    path,
     setValue,
     showError,
     value,
   } = useField<SerializedEditorState>({
-    path,
+    potentiallyStalePath: pathFromProps,
     validate: memoizedValidate,
   })
 

packages/richtext-slate/src/field/RichText.tsx

@@ -28,7 +28,6 @@ import type { LoadedSlateFieldProps } from './types.js'
 import { defaultRichTextValue } from '../data/defaultValue.js'
 import { richTextValidate } from '../data/validation.js'
 import { listTypes } from './elements/listTypes.js'
-import './index.scss'
 import { hotkeys } from './hotkeys.js'
 import { toggleLeaf } from './leaves/toggle.js'
 import { withEnterBreakOut } from './plugins/withEnterBreakOut.js'
@@ -37,6 +36,7 @@ import { ElementButtonProvider } from './providers/ElementButtonProvider.js'
 import { ElementProvider } from './providers/ElementProvider.js'
 import { LeafButtonProvider } from './providers/LeafButtonProvider.js'
 import { LeafProvider } from './providers/LeafProvider.js'
+import './index.scss'
 
 const baseClass = 'rich-text'
 
@@ -66,7 +66,6 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
     validate = richTextValidate,
   } = props
 
-  const path = pathFromProps ?? name
   const schemaPath = schemaPathFromProps ?? name
 
   const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin
@@ -97,11 +96,12 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
     customComponents: { Description, Error, Label } = {},
     disabled: disabledFromField,
     initialValue,
+    path,
     setValue,
     showError,
     value,
   } = useField({
-    path,
+    potentiallyStalePath: pathFromProps,
     validate: memoizedValidate,
   })
 

packages/ui/src/elements/QueryPresets/fields/ColumnsField/index.tsx

@@ -11,9 +11,8 @@ import './index.scss'
 
 export const QueryPresetsColumnField: JSONFieldClientComponent = ({
   field: { label, required },
-  path,
 }) => {
-  const { value } = useField({ path })
+  const { path, value } = useField()
 
   return (
     <div className="field-type query-preset-columns-field">