diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx index 5e312a44b5..882d0c1e78 100644 --- a/packages/ui/src/fields/Array/index.tsx +++ b/packages/ui/src/fields/Array/index.tsx @@ -52,6 +52,7 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => { schemaPath: schemaPathFromProps, validate, } = props + const schemaPath = schemaPathFromProps ?? name const minRows = (minRowsProp ?? required) ? 1 : 0 @@ -129,13 +130,11 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => { schemaPath, }) - setModified(true) - setTimeout(() => { scrollToID(`${path}-row-${rowIndex}`) }, 0) }, - [addFieldRow, path, schemaPath, setModified], + [addFieldRow, path, schemaPath], ) const duplicateRow = useCallback( diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx index 2e51adc61f..856bd4837b 100644 --- a/packages/ui/src/fields/Blocks/index.tsx +++ b/packages/ui/src/fields/Blocks/index.tsx @@ -116,13 +116,11 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => { schemaPath, }) - setModified(true) - setTimeout(() => { scrollToID(`${path}-row-${rowIndex + 1}`) }, 0) }, - [addFieldRow, path, schemaPath, setModified], + [addFieldRow, path, schemaPath], ) const duplicateRow = useCallback( diff --git a/packages/ui/src/forms/Form/index.tsx b/packages/ui/src/forms/Form/index.tsx index 0d4ec475f6..86db9012d7 100644 --- a/packages/ui/src/forms/Form/index.tsx +++ b/packages/ui/src/forms/Form/index.tsx @@ -518,6 +518,8 @@ export const Form: React.FC = (props) => { rowIndex, subFieldState, }) + + setModified(true) }, [dispatchFields, getDataByPath], ) @@ -541,6 +543,8 @@ export const Form: React.FC = (props) => { rowIndex, subFieldState, }) + + setModified(true) }, [dispatchFields, getDataByPath], ) diff --git a/test/_community/payload-types.ts b/test/_community/payload-types.ts index 129bd05dd7..fd6483846a 100644 --- a/test/_community/payload-types.ts +++ b/test/_community/payload-types.ts @@ -40,9 +40,9 @@ export interface Config { user: User & { collection: 'users'; }; - jobs?: { + jobs: { tasks: unknown; - workflows?: unknown; + workflows: unknown; }; } export interface UserAuthOperations { diff --git a/test/fields/collections/Array/AddRowButton.tsx b/test/fields/collections/Array/AddRowButton.tsx new file mode 100644 index 0000000000..70ff25f80c --- /dev/null +++ b/test/fields/collections/Array/AddRowButton.tsx @@ -0,0 +1,29 @@ +'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 ( + + ) +} + +export default AddRowButton diff --git a/test/fields/collections/Array/CustomField.tsx b/test/fields/collections/Array/CustomField.tsx new file mode 100644 index 0000000000..6119d02322 --- /dev/null +++ b/test/fields/collections/Array/CustomField.tsx @@ -0,0 +1,11 @@ +import type { TextFieldServerComponent } from 'payload' + +import { TextField } from '@payloadcms/ui' + +export const CustomField: TextFieldServerComponent = ({ clientField, path }) => { + return ( +
+ +
+ ) +} diff --git a/test/fields/collections/Array/e2e.spec.ts b/test/fields/collections/Array/e2e.spec.ts index 0644106c1b..27fe6d743d 100644 --- a/test/fields/collections/Array/e2e.spec.ts +++ b/test/fields/collections/Array/e2e.spec.ts @@ -295,4 +295,10 @@ describe('Array', () => { 'Updated 3 Array Fields successfully.', ) }) + + test('should externally update array rows and render custom fields', async () => { + await page.goto(url.create) + await page.locator('#updateArrayExternally').click() + await expect(page.locator('#custom-field')).toBeVisible() + }) }) diff --git a/test/fields/collections/Array/index.ts b/test/fields/collections/Array/index.ts index 63ed8c8a42..1fe4aec1bc 100644 --- a/test/fields/collections/Array/index.ts +++ b/test/fields/collections/Array/index.ts @@ -183,6 +183,30 @@ const ArrayFields: CollectionConfig = { }, ], }, + { + name: 'externallyUpdatedArray', + type: 'array', + fields: [ + { + name: 'customField', + type: 'ui', + admin: { + components: { + Field: '/collections/Array/CustomField.js#CustomField', + }, + }, + }, + ], + }, + { + name: 'ui', + type: 'ui', + admin: { + components: { + Field: '/collections/Array/AddRowButton.js', + }, + }, + }, ], slug: arrayFieldsSlug, versions: true, diff --git a/test/fields/payload-types.ts b/test/fields/payload-types.ts index 820ee88ee2..218df9acd3 100644 --- a/test/fields/payload-types.ts +++ b/test/fields/payload-types.ts @@ -465,6 +465,11 @@ export interface ArrayField { id?: string | null; }[] | null; + externallyUpdatedArray?: + | { + id?: string | null; + }[] + | null; updatedAt: string; createdAt: string; } @@ -2084,6 +2089,13 @@ export interface ArrayFieldsSelect { }; id?: T; }; + externallyUpdatedArray?: + | T + | { + customField?: T; + id?: T; + }; + ui?: T; updatedAt?: T; createdAt?: T; } @@ -3400,6 +3412,6 @@ export interface Auth { declare module 'payload' { - // @ts-ignore + // @ts-ignore export interface GeneratedTypes extends Config {} -} +} \ No newline at end of file