From 62fc2f552fcab62afb8eaf416814e02a04e1915a Mon Sep 17 00:00:00 2001
From: Patrik <patrik@payloadcms.com>
Date: Fri, 6 Dec 2024 13:22:41 -0500
Subject: [PATCH] fix(ui): collapsed array state on input change (#9800)

### What?

Previously, `initCollapsed: true` `array` fields would auto collapse
when typing in their respective inputs while in the create new view.

### Why?

This was due to the fact that we were only checking if `preferences`
existed in `form state` to handle the current state of the array row and
then falling back on the `initCollapsed` prop if `preferences` didn't
exist.

This was a problem because during create - `preferences` do not exist
yet. As a result, the state of the array row would keep falling back to
collapsed if `initCollapsed` was set to `true`.

### How?

To fix this, we now check the actual form state first before falling
back to preferences and then falling back to the initCollapsed prop
value.

Fixes #9775
---
 .../ui/src/elements/TableColumns/index.tsx    |  2 +-
 .../addFieldStatePromise.ts                   | 22 ++++++++++++++-----
 test/fields/collections/Array/e2e.spec.ts     |  8 +++++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/elements/TableColumns/index.tsx b/packages/ui/src/elements/TableColumns/index.tsx
index 14e21cadf8c..3d3251b740b 100644
--- a/packages/ui/src/elements/TableColumns/index.tsx
+++ b/packages/ui/src/elements/TableColumns/index.tsx
@@ -75,7 +75,7 @@ export const TableColumnsProvider: React.FC<Props> = ({
   }) as ClientCollectionConfig
 
   const prevCollection = React.useRef<SanitizedCollectionConfig['slug']>(collectionSlug)
-  const { getPreference, setPreference } = usePreferences()
+  const { getPreference } = usePreferences()
 
   const [tableColumns, setTableColumns] = React.useState(columnState)
   const tableStateControllerRef = React.useRef<AbortController>(null)
diff --git a/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts b/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts
index f4fdaa63a99..8da6b4985ff 100644
--- a/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts
+++ b/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts
@@ -274,14 +274,26 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
               }),
             )
 
-            const collapsedRowIDs = preferences?.fields?.[path]?.collapsed
+            const previousRows = previousFormState?.[path]?.rows || []
+            const collapsedRowIDsFromPrefs = preferences?.fields?.[path]?.collapsed
 
             acc.rows.push({
               id: row.id,
-              collapsed:
-                collapsedRowIDs === undefined
-                  ? field.admin.initCollapsed
-                  : collapsedRowIDs.includes(row.id),
+              collapsed: (() => {
+                // First, check if `previousFormState` has a matching row
+                const previousRow = previousRows.find((prevRow) => prevRow.id === row.id)
+                if (previousRow?.collapsed !== undefined) {
+                  return previousRow.collapsed
+                }
+
+                // If previousFormState is undefined, check preferences
+                if (collapsedRowIDsFromPrefs !== undefined) {
+                  return collapsedRowIDsFromPrefs.includes(row.id) // Check if collapsed in preferences
+                }
+
+                // If neither exists, fallback to `field.admin.initCollapsed`
+                return field.admin.initCollapsed
+              })(),
             })
 
             return acc
diff --git a/test/fields/collections/Array/e2e.spec.ts b/test/fields/collections/Array/e2e.spec.ts
index 27fe6d743dd..0a3cded1407 100644
--- a/test/fields/collections/Array/e2e.spec.ts
+++ b/test/fields/collections/Array/e2e.spec.ts
@@ -301,4 +301,12 @@ describe('Array', () => {
     await page.locator('#updateArrayExternally').click()
     await expect(page.locator('#custom-field')).toBeVisible()
   })
+
+  test('should not re-close initCollapsed true array rows on input in create new view', async () => {
+    await page.goto(url.create)
+    await page.locator('#field-collapsedArray >> .array-field__add-row').click()
+    await page.locator('#field-collapsedArray__0__text').fill('test')
+    const collapsedArrayRow = page.locator('#collapsedArray-row-0 .collapsible--collapsed')
+    await expect(collapsedArrayRow).toBeHidden()
+  })
 })