fix: prioritize props path in useField - fixes sub-fields initialized from within fields, like blockName (#5451)

packages/next/src/views/ResetPassword/index.tsx

@@ -86,7 +86,7 @@ export const ResetPassword: React.FC<AdminViewProps> = ({ initPageResult, params
             required
           />
           <ConfirmPassword />
-          <HiddenInput name="token" value={token} />
+          <HiddenInput forceUsePathFromProps name="token" value={token} />
           <FormSubmit>{i18n.t('authentication:resetPassword')}</FormSubmit>
         </Form>
       </div>

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

@@ -5,6 +5,7 @@ import type { SerializedEditorState } from 'lexical'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { useField } from '@payloadcms/ui/forms/useField'
 import React, { useCallback } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -53,9 +54,10 @@ export const RichText: React.FC<
     // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709
     [validate, required],
   )
+  const { path: pathFromContext } = useFieldProps()
 
   const fieldType = useField<SerializedEditorState>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

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

@@ -9,6 +9,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { useField } from '@payloadcms/ui/forms/useField'
 import { withCondition } from '@payloadcms/ui/forms/withCondition'
 import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
@@ -93,8 +94,10 @@ const RichTextField: React.FC<
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { initialValue, path, schemaPath, setValue, showError, value } = useField({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Array/index.tsx

@@ -7,6 +7,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
@@ -107,6 +108,8 @@ export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
     [maxRows, minRows, required, validate, editingDefaultLocale],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const {
     path,
     rows = [],
@@ -116,7 +119,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
     value,
   } = useField<number>({
     hasRows: true,
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Blocks/index.tsx

@@ -30,6 +30,7 @@ import type { BlockField, FieldBase } from 'payload/types'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 
 import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared/index.js'
@@ -108,6 +109,8 @@ export const BlocksField: React.FC<BlocksFieldProps> = (props) => {
     [maxRows, minRows, required, validate, editingDefaultLocale],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const {
     path,
     permissions,
@@ -118,7 +121,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = (props) => {
     value,
   } = useField<number>({
     hasRows: true,
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Checkbox/index.tsx

@@ -3,6 +3,7 @@ import type { ClientValidate } from 'payload/types'
 
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { CheckboxFieldProps } from './types.js'
@@ -55,9 +56,11 @@ const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, setValue, showError, value } = useField({
     disableFormData,
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Code/index.tsx

@@ -5,6 +5,7 @@ import type { CodeField as CodeFieldType, FieldBase } from 'payload/types'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
@@ -62,8 +63,10 @@ const CodeField: React.FC<CodeFieldProps> = (props) => {
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { setValue, showError, value } = useField({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/DateTime/index.tsx

@@ -18,6 +18,7 @@ import type { DateField, FieldBase } from 'payload/types'
 
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 
 import type { FormFieldBase } from '../shared/index.js'
 
@@ -65,8 +66,10 @@ const DateTimeField: React.FC<DateFieldProps> = (props) => {
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, setValue, showError, value } = useField<Date>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Email/index.tsx

@@ -6,6 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
@@ -58,8 +59,10 @@ const EmailField: React.FC<EmailFieldProps> = (props) => {
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, setValue, showError, value } = useField({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/HiddenInput/index.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useEffect } from 'react'
 
 import type { FormFieldBase } from '../index.js'
@@ -8,6 +9,7 @@ import { withCondition } from '../../forms/withCondition/index.js'
 
 export type HiddenInputFieldProps = FormFieldBase & {
   disableModifyingForm?: false
+  forceUsePathFromProps?: boolean
   name: string
   path?: string
   value?: unknown
@@ -18,10 +20,18 @@ export type HiddenInputFieldProps = FormFieldBase & {
  * For example, this sets the `ìd` property of a block in the Blocks field.
  */
 const HiddenInputField: React.FC<HiddenInputFieldProps> = (props) => {
-  const { name, disableModifyingForm = true, path: pathFromProps, value: valueFromProps } = props
+  const {
+    name,
+    disableModifyingForm = true,
+    forceUsePathFromProps,
+    path: pathFromProps,
+    value: valueFromProps,
+  } = props
+
+  const { path: pathFromContext } = useFieldProps()
 
   const { path, setValue, value } = useField({
-    path: pathFromProps || name,
+    path: (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name,
   })
 
   useEffect(() => {

packages/ui/src/fields/JSON/index.tsx

@@ -16,6 +16,7 @@ import type { FieldBase, JSONField as JSONFieldType } from 'payload/types'
 
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 
 import type { FormFieldBase } from '../shared/index.js'
 
@@ -60,6 +61,8 @@ const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
     [validate, required, jsonError],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const {
     initialValue,
     // path,
@@ -67,7 +70,7 @@ const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
     showError,
     value,
   } = useField<string>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Number/index.tsx

@@ -6,6 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { isNumber } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -71,8 +72,10 @@ const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
     [validate, min, max, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, setValue, showError, value } = useField<number | number[]>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Point/index.tsx

@@ -16,6 +16,7 @@ const baseClass = 'point'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 
 import type { FormFieldBase } from '../shared/index.js'
 
@@ -61,13 +62,15 @@ const PointField: React.FC<PointFieldProps> = (props) => {
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const {
     path,
     setValue,
     showError,
     value = [null, null],
   } = useField<[number, number]>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/RadioGroup/index.tsx

@@ -18,6 +18,7 @@ const baseClass = 'radio-group'
 
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 
 import type { FormFieldBase } from '../shared/index.js'
 
@@ -66,13 +67,15 @@ const RadioGroupField: React.FC<RadioFieldProps> = (props) => {
     [validate, options, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const {
     path,
     setValue,
     showError,
     value: valueFromContext,
   } = useField<string>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Relationship/index.tsx

@@ -5,6 +5,7 @@ import type { Where } from 'payload/types'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { wordBoundariesRegex } from 'payload/utilities'
 import qs from 'qs'
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
@@ -90,11 +91,12 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
     },
     [validate, required],
   )
+  const { path: pathFromContext } = useFieldProps()
 
   const { filterOptions, initialValue, path, setValue, showError, value } = useField<
     Value | Value[]
   >({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Select/index.tsx

@@ -6,6 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback, useState } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
@@ -79,8 +80,10 @@ export const SelectField: React.FC<SelectFieldProps> = (props) => {
     [validate, required, hasMany, options],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, setValue, showError, value } = useField({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Text/index.tsx

@@ -2,6 +2,7 @@
 import type { ClientValidate } from 'payload/types'
 import type {} from 'payload/types'
 
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Option } from '../../elements/ReactSelect/types.js'
@@ -57,8 +58,10 @@ const TextField: React.FC<TextFieldProps> = (props) => {
     [validate, minLength, maxLength, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, readOnly, setValue, showError, value } = useField({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Textarea/index.tsx

@@ -3,6 +3,7 @@
 import type { ClientValidate } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { TextAreaInputProps, TextareaFieldProps } from './types.js'
@@ -62,8 +63,10 @@ const TextareaField: React.FC<TextareaFieldProps> = (props) => {
     [validate, required, maxLength, minLength],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { path, readOnly, setValue, showError, value } = useField<string>({
-    path: pathFromProps || name,
+    path: pathFromContext || pathFromProps || name,
     validate: memoizedValidate,
   })
 

packages/ui/src/fields/Upload/index.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { UploadInputProps } from './Input.js'
@@ -48,8 +49,10 @@ export const Upload: React.FC<UploadFieldProps> = (props) => {
     [validate, required],
   )
 
+  const { path: pathFromContext } = useFieldProps()
+
   const { filterOptions, path, setValue, showError, value } = useField<string>({
-    path: pathFromProps,
+    path: pathFromContext || pathFromProps,
     validate: memoizedValidate,
   })
 

packages/ui/src/forms/useField/index.tsx

@@ -25,7 +25,8 @@ export const useField = <T,>(options: Options): FieldType<T> => {
 
   const { path: pathFromContext, permissions, readOnly, schemaPath } = useFieldProps()
 
-  const path = pathFromContext || options.path
+  // Prioritize passed in path over context path. If the context path should be prioritized (which is the case for top-level useField calls in fields), it should be passed in as the options path.
+  const path = options.path || pathFromContext
 
   const submitted = useFormSubmitted()
   const processing = useFormProcessing()