fix(ui): group field not forwarding forceRender to nested fields

packages/ui/src/fields/Group/index.tsx

@@ -29,6 +29,7 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
   const {
     field,
     field: { admin: { className, description, hideGutter } = {}, fields, label },
+    forceRender,
     indexPath,
     parentPath,
     parentSchemaPath,
@@ -111,6 +112,7 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
           {groupHasName(field) ? (
             <RenderFields
               fields={fields}
+              forceRender={forceRender}
               parentIndexPath=""
               parentPath={path}
               parentSchemaPath={schemaPath}
@@ -120,6 +122,7 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
           ) : (
             <RenderFields
               fields={fields}
+              forceRender={forceRender}
               parentIndexPath={indexPath}
               parentPath={parentPath}
               parentSchemaPath={parentSchemaPath}

test/fields/collections/Array/e2e.spec.ts

@@ -465,6 +465,32 @@ describe('Array', () => {
     await expect(page.locator(`#field-collapsedArray__0__text`)).toBeVisible()
   })
 
+  test(
+    'should render conditional fields inside a single group when an initially-collapsed array row is expanded for the first time',
+    async () => {
+      await page.goto(url.create)
+
+      const row = page.locator('#collapsedGroupWithCondition-row-0')
+      await expect(row).toBeVisible()
+
+      const toggler = row.locator('button.collapsible__toggle')
+      await expect(toggler).toHaveClass(/collapsible__toggle--collapsed/)
+
+      await toggleBlockOrArrayRow({
+        fieldName: 'collapsedGroupWithCondition',
+        page,
+        rowIndex: 0,
+        targetState: 'open',
+      })
+
+      // The conditional text field, nested inside the array row's single group field,
+      // must render immediately on the first expand rather than only after a second toggle
+      await expect(
+        page.locator('#field-collapsedGroupWithCondition__0__group__text'),
+      ).toBeVisible()
+    },
+  )
+
   describe('sortable arrays', () => {
     test('should have disabled admin sorting', async () => {
       await loadCreatePage()

test/fields/collections/Array/index.ts

@@ -97,6 +97,41 @@ const ArrayFields: CollectionConfig = {
       ],
       type: 'array',
     },
+    {
+      name: 'collapsedGroupWithCondition',
+      admin: {
+        initCollapsed: true,
+      },
+      defaultValue: [
+        {
+          group: {
+            text: 'conditional text',
+            toggle: true,
+          },
+        },
+      ],
+      fields: [
+        {
+          name: 'group',
+          fields: [
+            {
+              name: 'toggle',
+              defaultValue: true,
+              type: 'checkbox',
+            },
+            {
+              name: 'text',
+              admin: {
+                condition: (_, siblingData) => Boolean(siblingData?.toggle),
+              },
+              type: 'text',
+            },
+          ],
+          type: 'group',
+        },
+      ],
+      type: 'array',
+    },
     {
       name: 'localized',
       defaultValue: arrayDefaultValue,