21599b87f5
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.
15 lines
327 B
TypeScript
15 lines
327 B
TypeScript
import React from 'react'
|
|
|
|
export const FieldPathContext = React.createContext<string>(undefined)
|
|
|
|
export const useFieldPath = () => {
|
|
const context = React.useContext(FieldPathContext)
|
|
|
|
if (!context) {
|
|
// swallow the error, not all fields are wrapped in a FieldPathContext
|
|
return undefined
|
|
}
|
|
|
|
return context
|
|
}
|