fix: hidden and disabled fields cause incorrect field paths (#9680)

Author: jacobsfletch

docs/admin/fields.mdx

@@ -50,7 +50,7 @@ The following options are available:
 | **`style`**             | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                                 |
 | **`className`**         | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                             |
 | **`readOnly`**          | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
-| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview).                                                                                                                                    |
+| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely.                                                                                                                           |
 | **`disableBulkEdit`**   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents. Defaults to `true` for UI fields.                                                               |
 | **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
 | **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |

packages/next/src/views/Version/RenderFieldsToDiff/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 
-import { fieldAffectsData } from 'payload/shared'
+import { fieldAffectsData, fieldIsID } from 'payload/shared'
 import React from 'react'
 
 import type { diffComponents as _diffComponents } from './fields/index.js'
@@ -29,7 +29,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
   return (
     <div className={baseClass}>
       {fields?.map((field, i) => {
-        if ('name' in field && field.name === 'id') {
+        if (fieldIsID(field)) {
           return null
         }
 

packages/payload/src/collections/config/client.ts

@@ -234,7 +234,6 @@ export const createClientCollectionConfig = ({
         }
         break
 
-        break
       default:
         clientCollection[key] = collection[key]
     }

packages/payload/src/exports/shared.ts

@@ -19,6 +19,8 @@ export {
   fieldIsArrayType,
   fieldIsBlockType,
   fieldIsGroupType,
+  fieldIsHiddenOrDisabled,
+  fieldIsID,
   fieldIsLocalized,
   fieldIsPresentationalOnly,
   fieldIsSidebar,

packages/payload/src/fields/config/client.ts

@@ -75,28 +75,24 @@ export const createClientField = ({
 }): ClientField => {
   const clientField: ClientField = {} as ClientField
 
-  const isHidden = 'hidden' in incomingField && incomingField?.hidden
-  const disabledFromAdmin =
-    incomingField?.admin && 'disabled' in incomingField.admin && incomingField.admin.disabled
-
-  if (fieldAffectsData(incomingField) && (isHidden || disabledFromAdmin)) {
-    return null
-  }
-
   for (const key in incomingField) {
     if (serverOnlyFieldProperties.includes(key as any)) {
       continue
     }
+
     switch (key) {
       case 'admin':
         if (!incomingField.admin) {
           break
         }
+
         clientField.admin = {} as AdminClient
+
         for (const adminKey in incomingField.admin) {
           if (serverOnlyFieldAdminProperties.includes(adminKey as any)) {
             continue
           }
+
           switch (adminKey) {
             case 'description':
               if ('description' in incomingField.admin) {
@@ -107,16 +103,20 @@ export const createClientField = ({
               }
 
               break
+
             default:
               clientField.admin[adminKey] = incomingField.admin[adminKey]
           }
         }
+
         break
+
       case 'blocks':
       case 'fields':
       case 'tabs':
         // Skip - we handle sub-fields in the switch below
         break
+
       case 'label':
         //@ts-expect-error - would need to type narrow
         if (typeof incomingField.label === 'function') {
@@ -126,7 +126,9 @@ export const createClientField = ({
           //@ts-expect-error - would need to type narrow
           clientField.label = incomingField.label
         }
+
         break
+
       default:
         clientField[key] = incomingField[key]
     }
@@ -243,6 +245,7 @@ export const createClientField = ({
 
       break
     }
+
     case 'richText': {
       if (!incomingField?.editor) {
         throw new MissingEditorProp(incomingField) // while we allow disabling editor functionality, you should not have any richText fields defined if you do not have an editor
@@ -269,6 +272,7 @@ export const createClientField = ({
             if (serverOnlyFieldProperties.includes(key as any)) {
               continue
             }
+
             if (key === 'fields') {
               clientTab.fields = createClientFields({
                 defaultIDType,
@@ -320,9 +324,7 @@ export const createClientFields = ({
       importMap,
     })
 
-    if (clientField) {
-      clientFields.push(clientField)
-    }
+    clientFields.push(clientField)
   }
 
   const hasID = flattenTopLevelFields(fields).some((f) => fieldAffectsData(f) && f.name === 'id')

packages/payload/src/fields/config/types.ts

@@ -1709,6 +1709,21 @@ export function fieldIsSidebar<TField extends ClientField | Field | TabAsField |
   return 'admin' in field && 'position' in field.admin && field.admin.position === 'sidebar'
 }
 
+export function fieldIsID<TField extends ClientField | Field>(
+  field: TField,
+): field is { name: 'id' } & TField {
+  return 'name' in field && field.name === 'id'
+}
+
+export function fieldIsHiddenOrDisabled<
+  TField extends ClientField | Field | TabAsField | TabAsFieldClient,
+>(field: TField): field is { admin: { hidden: true } } & TField {
+  return (
+    ('hidden' in field && field.hidden) ||
+    ('admin' in field && 'disabled' in field.admin && field.admin.disabled)
+  )
+}
+
 export function fieldAffectsData<
   TField extends ClientField | Field | TabAsField | TabAsFieldClient,
 >(

packages/payload/src/index.ts

@@ -590,6 +590,7 @@ export class BasePayload {
         if (!fieldAffectsData(field)) {
           return
         }
+
         if (field.name === 'id') {
           customIDType = field.type
           return true

packages/payload/src/utilities/fieldSchemaToJSON.ts

@@ -52,11 +52,11 @@ export const fieldSchemaToJSON = (fields: ClientField[]): FieldSchemaJSON => {
 
         break
 
-      case 'collapsible':
-
+      case 'collapsible': // eslint-disable no-fallthrough
       case 'row':
         result = result.concat(fieldSchemaToJSON(field.fields))
         break
+
       case 'group':
         acc.push({
           name: field.name,
@@ -66,8 +66,7 @@ export const fieldSchemaToJSON = (fields: ClientField[]): FieldSchemaJSON => {
 
         break
 
-      case 'relationship':
-
+      case 'relationship': // eslint-disable no-fallthrough
       case 'upload':
         acc.push({
           name: field.name,
@@ -77,6 +76,7 @@ export const fieldSchemaToJSON = (fields: ClientField[]): FieldSchemaJSON => {
         })
 
         break
+
       case 'tabs': {
         let tabFields = []
 

packages/ui/src/elements/FieldSelect/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientField, FieldWithPath, FormState } from 'payload'
 
-import { fieldAffectsData, fieldHasSubFields } from 'payload/shared'
+import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled } from 'payload/shared'
 import React, { Fragment, useState } from 'react'
 
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
@@ -69,7 +69,7 @@ const reduceFields = ({
       (fieldAffectsData(field) || field.type === 'ui') &&
       (field.admin.disableBulkEdit ||
         field.unique ||
-        field.admin.hidden ||
+        fieldIsHiddenOrDisabled(field) ||
         ('readOnly' in field && field.readOnly))
     ) {
       return fieldsToUse

packages/ui/src/elements/Table/DefaultCell/index.tsx

@@ -3,7 +3,7 @@ import type { DefaultCellComponentProps, UploadFieldClient } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import LinkImport from 'next/link.js'
-import { fieldAffectsData } from 'payload/shared'
+import { fieldAffectsData, fieldIsID } from 'payload/shared'
 import React from 'react' // TODO: abstract this out to support all routers
 
 import { useConfig } from '../../../providers/Config/index.js'
@@ -77,7 +77,7 @@ export const DefaultCell: React.FC<DefaultCellComponentProps> = (props) => {
     }
   }
 
-  if ('name' in field && field.name === 'id') {
+  if (fieldIsID(field)) {
     return (
       <WrapElement {...wrapElementProps}>
         <CodeCell