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

Author: PatrikKozak

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)

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

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()
+  })
 })