fix: removes nested array field configs from array value (#3549)

* fix: array controls 'addBelow' was adding above

test/fields/collections/Array/components/AddCustomBlocks/index.tsx

@@ -10,8 +10,6 @@ export const AddCustomBlocks: React.FC = () => {
   const { addFieldRow, replaceFieldRow } = useForm()
   const { value } = useField({ path: 'customBlocks' })
 
-  const nextIndex = Array.isArray(value) ? value.length : 0
-
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__blocks-grid`}>
@@ -21,7 +19,6 @@ export const AddCustomBlocks: React.FC = () => {
             addFieldRow({
               data: { block1Title: 'Block 1: Prefilled Title', blockType: 'block-1' },
               path: 'customBlocks',
-              rowIndex: nextIndex,
             })
           }
           type="button"
@@ -35,7 +32,6 @@ export const AddCustomBlocks: React.FC = () => {
             addFieldRow({
               data: { block2Title: 'Block 2: Prefilled Title', blockType: 'block-2' },
               path: 'customBlocks',
-              rowIndex: nextIndex,
             })
           }
           type="button"
@@ -51,12 +47,12 @@ export const AddCustomBlocks: React.FC = () => {
             replaceFieldRow({
               data: { block1Title: 'REPLACED BLOCK', blockType: 'block-1' },
               path: 'customBlocks',
-              rowIndex: nextIndex - 1,
+              rowIndex: (Array.isArray(value) ? value.length : 0) - 1,
             })
           }
           type="button"
         >
-          Replace Block {nextIndex}
+          Replace Block {Array.isArray(value) ? value.length : 0}
         </button>
       </div>
     </div>

test/fields/collections/Collapsible/index.ts

@@ -1,8 +1,7 @@
 import type { CollectionConfig } from '../../../../packages/payload/src/collections/config/types'
 
 import { CollapsibleLabelComponent } from './LabelComponent'
-
-export const collapsibleFieldsSlug = 'collapsible-fields'
+import { collapsibleFieldsSlug } from './shared'
 
 const CollapsibleFields: CollectionConfig = {
   slug: collapsibleFieldsSlug,

test/fields/collections/Collapsible/shared.ts

@@ -0,0 +1 @@
+export const collapsibleFieldsSlug = 'collapsible-fields'

test/fields/e2e.spec.ts

@@ -9,7 +9,7 @@ import wait from '../../packages/payload/src/utilities/wait'
 import { saveDocAndAssert, saveDocHotkeyAndAssert } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
-import { collapsibleFieldsSlug } from './collections/Collapsible'
+import { collapsibleFieldsSlug } from './collections/Collapsible/shared'
 import { jsonDoc } from './collections/JSON'
 import { numberDoc } from './collections/Number'
 import { pointFieldsSlug } from './collections/Point'

test/nested-fields/e2e.spec.ts

@@ -0,0 +1,48 @@
+import type { Page } from '@playwright/test'
+
+import { expect, test } from '@playwright/test'
+
+import { saveDocAndAssert } from '../helpers'
+import { AdminUrlUtil } from '../helpers/adminUrlUtil'
+import { initPayloadTest } from '../helpers/configHelpers'
+
+const { beforeAll, describe } = test
+let url: AdminUrlUtil
+
+const slug = 'nested-fields'
+
+let page: Page
+
+describe('Nested Fields', () => {
+  beforeAll(async ({ browser }) => {
+    const { serverURL } = await initPayloadTest({
+      __dirname,
+      init: {
+        local: false,
+      },
+    })
+
+    url = new AdminUrlUtil(serverURL, slug)
+
+    const context = await browser.newContext()
+    page = await context.newPage()
+  })
+
+  test('should save deeply nested fields', async () => {
+    const assertionValue = 'sample block value'
+
+    await page.goto(url.create)
+
+    await page.locator('#field-array > button').click()
+    await page.locator('#field-array__0__group__namedTab__blocks > button').click()
+    await page.locator('button[title="Block With Field"]').click()
+
+    await page.locator('#field-array__0__group__namedTab__blocks__0__text').fill(assertionValue)
+
+    await saveDocAndAssert(page)
+
+    await expect(page.locator('#field-array__0__group__namedTab__blocks__0__text')).toHaveValue(
+      assertionValue,
+    )
+  })
+})