b81358ce7e
The task queue triggers an infinite render of form state. This is because we return an object from the `useQueues` hook that is recreated on every render. We then use the `queueTask` function as an unstable dependency of the `useEffect` responsible for requesting new form state, ultimately triggering an infinite rendering loop. The fix is to stabilize the `queueTask` function within a `useCallback`. Adds a test to prevent future regression.
69 lines
1.3 KiB
TypeScript
69 lines
1.3 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
export const postsSlug = 'posts'
|
|
|
|
export const PostsCollection: CollectionConfig = {
|
|
slug: postsSlug,
|
|
admin: {
|
|
useAsTitle: 'title',
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'renderTracker',
|
|
type: 'text',
|
|
admin: {
|
|
components: {
|
|
Field: './collections/Posts/RenderTracker.js#RenderTracker',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'validateUsingEvent',
|
|
type: 'text',
|
|
admin: {
|
|
description:
|
|
'This field should only validate on submit. Try typing "Not allowed" and submitting the form.',
|
|
},
|
|
validate: (value, { event }) => {
|
|
if (event === 'onChange') {
|
|
return true
|
|
}
|
|
|
|
if (value === 'Not allowed') {
|
|
return 'This field has been validated only on submit'
|
|
}
|
|
|
|
return true
|
|
},
|
|
},
|
|
{
|
|
name: 'blocks',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'text',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'number',
|
|
fields: [
|
|
{
|
|
name: 'number',
|
|
type: 'number',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|