36e152d69d
### What? Unable to update json fields externally. For example, calling `setValue` on a json field would not be reflected in the admin panel UI. ### Why? JSON fields use the monaco editor to manage state internally, so programmatically updating the value in state does not change the internal value. ### How? Set a ref when the user updates the value and then unset the ref after the change is complete. Inside the hook that watches `value`, if the value changed and the change came from the system (i.e. a programmatic change) refresh the editor by adjusting its key prop. If the change was made by the user, there is no need to refresh the editor. Fixes https://github.com/payloadcms/payload/issues/10819
39 lines
835 B
TypeScript
39 lines
835 B
TypeScript
'use client'
|
|
|
|
import { useField } from '@payloadcms/ui'
|
|
|
|
export function AfterField() {
|
|
const { setValue } = useField({ path: 'customJSON' })
|
|
|
|
return (
|
|
<button
|
|
id="set-custom-json"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
setValue({
|
|
users: [
|
|
{
|
|
id: 1,
|
|
name: 'John Doe',
|
|
email: 'john.doe@example.com',
|
|
isActive: true,
|
|
roles: ['admin', 'editor'],
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Jane Smith',
|
|
email: 'jane.smith@example.com',
|
|
isActive: false,
|
|
roles: ['viewer'],
|
|
},
|
|
],
|
|
})
|
|
}}
|
|
style={{ marginTop: '5px', padding: '5px 10px' }}
|
|
type="button"
|
|
>
|
|
Set Custom JSON
|
|
</button>
|
|
)
|
|
}
|