Fixes #9264. When externally updating array or block rows through the `addFieldRow` or `replaceFieldRow` methods, nested rich text fields along with any custom components within them are never rendered. This is because unless the form is explicitly set to modified, as the default array and blocks fields currently do, the newly generated form-state will skip the rendering step. Now, the underlying callbacks themselves automatically set the form to modified to trigger rendering.
30 lines
571 B
TypeScript
30 lines
571 B
TypeScript
'use client'
|
|
|
|
import { useForm } from '@payloadcms/ui'
|
|
|
|
const AddRowButton = () => {
|
|
const { addFieldRow } = useForm()
|
|
|
|
const handleClick = () => {
|
|
addFieldRow({
|
|
path: 'externallyUpdatedArray',
|
|
schemaPath: 'externallyUpdatedArray',
|
|
subFieldState: {
|
|
text: {
|
|
initialValue: 'Hello, world!',
|
|
valid: true,
|
|
value: 'Hello, world!',
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<button id="updateArrayExternally" onClick={handleClick} type="button">
|
|
Add Row
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default AddRowButton
|