fix: admin.hidden not respected for RSCs, render-field server function not respecting field-overrides client-side

packages/ui/src/forms/RenderFields/RenderField.tsx

@@ -53,10 +53,6 @@ export function RenderField({
 }: RenderFieldProps) {
   const CustomField = useFormFields(([fields]) => fields && fields?.[path]?.customComponents?.Field)
 
-  if (CustomField !== undefined) {
-    return CustomField || null
-  }
-
   const baseFieldProps: Pick<
     ClientComponentProps,
     'forceRender' | 'permissions' | 'readOnly' | 'schemaPath'
@@ -67,17 +63,21 @@ export function RenderField({
     schemaPath,
   }
 
+  if (clientFieldConfig.admin?.hidden) {
+    return <HiddenField {...baseFieldProps} path={path} />
+  }
+
+  if (CustomField !== undefined) {
+    return CustomField || null
+  }
+
   const iterableFieldProps = {
     ...baseFieldProps,
     indexPath,
     parentPath,
     parentSchemaPath,
   }
 
-  if (clientFieldConfig.admin?.hidden) {
-    return <HiddenField {...baseFieldProps} path={path} />
-  }
-
   switch (clientFieldConfig.type) {
     case 'array':
       return <ArrayField {...iterableFieldProps} field={clientFieldConfig} path={path} />

packages/ui/src/forms/fieldSchemasToFormState/renderField.tsx

@@ -32,6 +32,7 @@ export const renderField: RenderFieldMethod = ({
   fieldConfig,
   fieldSchemaMap,
   fieldState,
+  forceCreateClientField,
   formState,
   indexPath,
   lastRenderedPath,
@@ -54,14 +55,15 @@ export const renderField: RenderFieldMethod = ({
     return
   }
 
-  const clientField = clientFieldSchemaMap
-    ? (clientFieldSchemaMap.get(schemaPath) as ClientField)
-    : createClientField({
-        defaultIDType: req.payload.config.db.defaultIDType,
-        field: fieldConfig,
-        i18n: req.i18n,
-        importMap: req.payload.importMap,
-      })
+  const clientField =
+    clientFieldSchemaMap && !forceCreateClientField
+      ? (clientFieldSchemaMap.get(schemaPath) as ClientField)
+      : createClientField({
+          defaultIDType: req.payload.config.db.defaultIDType,
+          field: fieldConfig,
+          i18n: req.i18n,
+          importMap: req.payload.importMap,
+        })
 
   const clientProps: ClientComponentProps & Partial<FieldPaths> = {
     field: clientField,

packages/ui/src/forms/fieldSchemasToFormState/serverFunctions/renderFieldServerFn.ts

@@ -108,6 +108,8 @@ export const _internal_renderFieldHandler: ServerFunction<
     preferences: {
       fields: {},
     },
+    // If we are passed a field override, we want to ensure we create a new client field based on that override
+    forceCreateClientField: fieldArg ? true : false,
     previousFieldState: undefined,
     renderAllFields: true,
     req,

packages/ui/src/forms/fieldSchemasToFormState/types.ts

@@ -18,6 +18,12 @@ export type RenderFieldArgs = {
   fieldConfig: Field
   fieldSchemaMap: FieldSchemaMap
   fieldState: FieldState
+  /**
+   * If set to true, it will force creating a clientField based on the passed fieldConfig instead of pulling
+   * the client field from the clientFieldSchemaMap. This is useful if the passed fieldConfig differs from the one in the schema map,
+   * e.g. when calling the render-field server function and passing a field config override.
+   */
+  forceCreateClientField?: boolean
   formState: FormState
   id?: number | string
   indexPath: string

test/lexical/collections/OnDemandForm/e2e.spec.ts

@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test'
 import { AdminUrlUtil } from 'helpers/adminUrlUtil.js'
 import { reInitializeDB } from 'helpers/reInitializeDB.js'
 import path from 'path'
+import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
 
 import { ensureCompilationIsDone, saveDocAndAssert } from '../../../helpers.js'
@@ -102,5 +103,19 @@ describe('Lexical On Demand', () => {
       await expect(lexical.drawer.locator('#field-rows')).toHaveValue('5')
       await expect(lexical.drawer.locator('#field-columns')).toHaveValue('5')
     })
+
+    test('on-demand editor renders label', async ({ page }) => {
+      await expect(page.locator('.field-label[for="field-myField"]')).toHaveText('My Label')
+    })
+
+    test('ensure anchor richText field is hidden', async ({ page }) => {
+      // Important: Wait for all fields to render
+      await wait(1000)
+      await expect(page.locator('.shimmer')).toHaveCount(0)
+
+      await expect(page.locator('.field-label[for="field-hiddenAnchor"]')).toHaveCount(0)
+
+      await expect(page.locator('.rich-text-lexical')).toHaveCount(1)
+    })
   })
 })

test/lexical/collections/OnDemandOutsideForm/Component.tsx

@@ -6,8 +6,6 @@ import type { JSONFieldClientComponent } from 'payload'
 import { buildEditorState, RenderLexical } from '@payloadcms/richtext-lexical/client'
 import React, { useState } from 'react'
 
-import { lexicalFullyFeaturedSlug } from '../../slugs.js'
-
 export const Component: JSONFieldClientComponent = () => {
   const [value, setValue] = useState<DefaultTypedEditorState | undefined>(() =>
     buildEditorState({ text: 'state default' }),
@@ -21,9 +19,9 @@ export const Component: JSONFieldClientComponent = () => {
     <div>
       Default Component:
       <RenderLexical
-        field={{ name: 'myField' }}
+        field={{ name: 'myField', label: 'My Label' }}
         initialValue={buildEditorState({ text: 'defaultValue' })}
-        schemaPath={`collection.${lexicalFullyFeaturedSlug}.richText`}
+        schemaPath={`collection.OnDemandOutsideForm.hiddenAnchor`}
         setValue={setValue as any}
         value={value}
       />

test/lexical/collections/OnDemandOutsideForm/index.ts

@@ -1,5 +1,7 @@
 import type { CollectionConfig } from 'payload'
 
+import { EXPERIMENTAL_TableFeature, lexicalEditor } from '@payloadcms/richtext-lexical'
+
 export const OnDemandOutsideForm: CollectionConfig = {
   slug: 'OnDemandOutsideForm',
   fields: [
@@ -12,5 +14,15 @@ export const OnDemandOutsideForm: CollectionConfig = {
         },
       },
     },
+    {
+      name: 'hiddenAnchor',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ rootFeatures }) => [...rootFeatures, EXPERIMENTAL_TableFeature()],
+      }),
+      admin: {
+        hidden: true,
+      },
+    },
   ],
 }