fix(ui): safely extract text from React nodes (#12419)

Author: jacobsfletch

packages/ui/src/elements/WhereBuilder/reduceFields.tsx

@@ -4,7 +4,6 @@ import type { ClientField } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import { fieldAffectsData, fieldIsHiddenOrDisabled, fieldIsID, tabHasName } from 'payload/shared'
-import { renderToStaticMarkup } from 'react-dom/server'
 
 import type { ReducedField } from './types.js'
 
@@ -195,15 +194,11 @@ export const reduceFields = ({
           })
         : localizedLabel
 
-      // React elements in filter options are not searchable in React Select
-      // Extract plain text to make them filterable in dropdowns
-      const textFromLabel = extractTextFromReactNode(formattedLabel)
-
       const fieldPath = pathPrefix ? createNestedClientFieldPath(pathPrefix, field) : field.name
 
       const formattedField: ReducedField = {
         label: formattedLabel,
-        plainTextLabel: textFromLabel,
+        plainTextLabel: `${labelPrefix ? labelPrefix + ' > ' : ''}${localizedLabel}`,
         value: fieldPath,
         ...fieldTypes[field.type],
         field,
@@ -216,29 +211,3 @@ export const reduceFields = ({
     return reduced
   }, [])
 }
-
-/**
- * Extracts plain text content from a React node by removing HTML tags.
- * Used to make React elements searchable in filter dropdowns.
- */
-const extractTextFromReactNode = (reactNode: React.ReactNode): string => {
-  if (!reactNode) {
-    return ''
-  }
-  if (typeof reactNode === 'string') {
-    return reactNode
-  }
-
-  const html = renderToStaticMarkup(reactNode)
-
-  // Handle different environments (server vs browser)
-  if (typeof document !== 'undefined') {
-    // Browser environment - use actual DOM
-    const div = document.createElement('div')
-    div.innerHTML = html
-    return div.textContent || ''
-  } else {
-    // Server environment - use regex to strip HTML tags
-    return html.replace(/<[^>]*>/g, '')
-  }
-}

tsconfig.base.json

@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/_community/config.ts"],
+      "@payload-config": ["./test/access-control/config.ts"],
       "@payloadcms/admin-bar": ["./packages/admin-bar/src"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],