Fixes https://github.com/payloadcms/payload/issues/12286. Supersedes
https://github.com/payloadcms/payload/pull/12290.
As of
[v3.35.0](https://github.com/payloadcms/payload/releases/tag/v3.35.0),
you are no longer able to directly pass a `path` prop to a custom field
component.
For example:
```tsx
'use client'
import React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldClientComponent } from 'payload'
export const MyCustomField: TextFieldClientComponent = (props) => {
return (
<TextField
{...props}
path="path.to.some.other.field" // This will not be respected, because this field's context takes precedence
/>
)
}
```
This was introduced in #11973 where we began passing a new
`potentiallyStalePath` arg to the `useField` hook that takes the path
from context as priority. This change was necessary in order to fix
stale paths during row manipulation while the server is processing.
To ensure field components respect your custom path, you need to wrap
your components with their own `FieldPathContext`:
```tsx
'use client'
import React from 'react'
import { TextField, FieldPathContext } from '@payloadcms/ui'
import type { TextFieldClientComponent } from 'payload'
export const MyCustomField: TextFieldClientComponent = (props) => {
return (
<FieldPathContext path="path.to.some.other.field">
<TextField {...props} />
</FieldPathContext>
)
}
```
It's possible we can remove this in the future. I explored this in
#12290, but it may require some more substantial changes in
architecture. These exports are labeled experimental to allow for any
potential changes in behavior that we may need to make in the future.
---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
- https://app.asana.com/0/0/1210533177582945
a3acfeb871