From a5e6ea57373591ec90f452ad61b376f72f9ce304 Mon Sep 17 00:00:00 2001
From: Will Robson <132296416+wrobson-lllow@users.noreply.github.com>
Date: Mon, 17 Feb 2025 15:44:13 -0500
Subject: [PATCH] fix: remove collapsible label prefix from the FieldSelect
 dropdown component (#10760)

### What?

Removes Collapsible label from child field label in the `FieldSelect`
component (for example Bulk Edit field select dropdown)

### Why?

Including the Collapsible field label in the option label of the
FieldSelect component could potentially be confusing to a user as it
eludes to the field being nested in the Data schema.

### How?

In the reduceFields function of the FieldsLabel component, if
`field.type === 'collpasible'` the collapsible field's label will not be
combined with the child fields labels.

Fixes #10757

---------

Co-authored-by: Patrik Kozak <patrik@payloadcms.com>
---
 .../components/elements/FieldSelect/index.tsx      |  3 +++
 test/fields/e2e.spec.ts                            | 14 ++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/payload/src/admin/components/elements/FieldSelect/index.tsx b/packages/payload/src/admin/components/elements/FieldSelect/index.tsx
index 512a3b4b5c..bf3c05c88b 100644
--- a/packages/payload/src/admin/components/elements/FieldSelect/index.tsx
+++ b/packages/payload/src/admin/components/elements/FieldSelect/index.tsx
@@ -38,6 +38,9 @@ const reduceFields = (
     ) {
       return fieldsToUse
     }
+    if (field.type === 'collapsible') {
+      return [...fieldsToUse, ...reduceFields(field.fields, i18n, path, labelPrefix)]
+    }
     if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
       return [
         ...fieldsToUse,
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index 47de77f8e8..ecc7e72563 100644
--- a/test/fields/e2e.spec.ts
+++ b/test/fields/e2e.spec.ts
@@ -612,6 +612,20 @@ describe('fields', () => {
       )
       await expect(customCollapsibleLabel).toHaveCSS('text-transform', 'uppercase')
     })
+
+    test('should not render collapsible label in bulk update field select', async () => {
+      await page.goto(url.list)
+
+      await page.locator('input#select-all').check()
+      await page.locator('.edit-many__toggle').click()
+      await page.locator('.field-select .rs__control').click()
+
+      const firstCollapsibleOption = page.locator('.rs__option', {
+        hasText: exactText('Text'),
+      })
+
+      await expect(firstCollapsibleOption).toBeVisible()
+    })
   })
 
   describe('blocks', () => {