fix(ui): fallback to default locale checkbox passes wrong value (#12396)

### What?
Allows document to successfully be saved when `fallback to default
locale` checked without throwing an error.

### Why?
The `fallback to default locale` checkbox allows users to successfully
save a document in the admin panel while using fallback data for
required fields, this has been broken since the release of `v3`.

Without the checkbox override, the user would be prevented from saving
the document in the UI because the field is required and will throw an
error.

The logic of using fallback data is not affected by this checkbox - it
is purely to allow saving the document in the UI.

### How?
The `fallback` checkbox used to have an `onChange` function that
replaces the field value with null, allowing it to get processed through
the standard localization logic and get replaced by fallback data.
However, this `onChange` was removed at some point and the field was
passing the actual checkbox value `true`/`false` which then breaks the
form and prevent it from saving.

This fallback checkbox is only displayed when `fallback: true` is set in
the localization config.
This PR also updated the checkbox to only be displayed when `required:
true` - when it's the field is not `required` this checkbox serves no
purpose.

Also adds tests to `localization/e2e`.

Fixes #11245

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: jessrynkar

packages/payload/src/fields/hooks/afterRead/promise.ts

@@ -111,13 +111,14 @@ export const promise = async ({
     parentSchemaPath,
   })
 
+  const fieldAffectsDataResult = fieldAffectsData(field)
   const pathSegments = path ? path.split('.') : []
   const schemaPathSegments = schemaPath ? schemaPath.split('.') : []
   const indexPathSegments = indexPath ? indexPath.split('-').filter(Boolean)?.map(Number) : []
   let removedFieldValue = false
 
   if (
-    fieldAffectsData(field) &&
+    fieldAffectsDataResult &&
     field.hidden &&
     typeof siblingDoc[field.name!] !== 'undefined' &&
     !showHiddenFields
@@ -139,16 +140,17 @@ export const promise = async ({
     }
   }
 
-  const shouldHoistLocalizedValue =
+  const shouldHoistLocalizedValue: boolean = Boolean(
     flattenLocales &&
-    fieldAffectsData(field) &&
-    typeof siblingDoc[field.name!] === 'object' &&
-    siblingDoc[field.name!] !== null &&
-    fieldShouldBeLocalized({ field, parentIsLocalized: parentIsLocalized! }) &&
-    locale !== 'all' &&
-    req.payload.config.localization
-
-  if (shouldHoistLocalizedValue) {
+      fieldAffectsDataResult &&
+      typeof siblingDoc[field.name!] === 'object' &&
+      siblingDoc[field.name!] !== null &&
+      fieldShouldBeLocalized({ field, parentIsLocalized: parentIsLocalized! }) &&
+      locale !== 'all' &&
+      req.payload.config.localization,
+  )
+
+  if (fieldAffectsDataResult && shouldHoistLocalizedValue) {
     // replace actual value with localized value before sanitizing
     // { [locale]: fields } -> fields
     const value = siblingDoc[field.name!][locale!]
@@ -187,7 +189,7 @@ export const promise = async ({
     case 'group': {
       // Fill groups with empty objects so fields with hooks within groups can populate
       // themselves virtually as necessary
-      if (fieldAffectsData(field) && typeof siblingDoc[field.name] === 'undefined') {
+      if (fieldAffectsDataResult && typeof siblingDoc[field.name] === 'undefined') {
         siblingDoc[field.name] = {}
       }
 
@@ -234,7 +236,7 @@ export const promise = async ({
     }
   }
 
-  if (fieldAffectsData(field)) {
+  if (fieldAffectsDataResult) {
     // Execute hooks
     if (triggerHooks && field.hooks?.afterRead) {
       for (const hook of field.hooks.afterRead) {
@@ -400,7 +402,7 @@ export const promise = async ({
         }
       }
 
-      if (Array.isArray(rows)) {
+      if (Array.isArray(rows) && rows.length > 0) {
         rows.forEach((row, rowIndex) => {
           traverseFields({
             blockData,
@@ -468,6 +470,8 @@ export const promise = async ({
             })
           }
         })
+      } else if (shouldHoistLocalizedValue && (!rows || rows.length === 0)) {
+        siblingDoc[field.name] = null
       } else if (field.hidden !== true || showHiddenFields === true) {
         siblingDoc[field.name] = []
       }
@@ -477,7 +481,7 @@ export const promise = async ({
     case 'blocks': {
       const rows = siblingDoc[field.name]
 
-      if (Array.isArray(rows)) {
+      if (Array.isArray(rows) && rows.length > 0) {
         rows.forEach((row, rowIndex) => {
           const blockTypeToMatch = (row as JsonObject).blockType
 
@@ -573,6 +577,8 @@ export const promise = async ({
             })
           }
         })
+      } else if (shouldHoistLocalizedValue && (!rows || rows.length === 0)) {
+        siblingDoc[field.name] = null
       } else if (field.hidden !== true || showHiddenFields === true) {
         siblingDoc[field.name] = []
       }
@@ -617,7 +623,7 @@ export const promise = async ({
     }
 
     case 'group': {
-      if (fieldAffectsData(field)) {
+      if (fieldAffectsDataResult) {
         let groupDoc = siblingDoc[field.name] as JsonObject
 
         if (typeof siblingDoc[field.name] !== 'object') {

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

@@ -381,7 +381,12 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
           Fallback={<FieldDescription description={description} path={path} />}
         />
       </header>
-      <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
+      <NullifyLocaleField
+        fieldValue={value}
+        localized={localized}
+        path={path}
+        readOnly={readOnly}
+      />
       {BeforeInput}
       {(rows?.length > 0 || (!valid && (showRequired || showMinRows))) && (
         <DraggableSortable

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

@@ -382,7 +382,12 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
         />
       </header>
       {BeforeInput}
-      <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
+      <NullifyLocaleField
+        fieldValue={value}
+        localized={localized}
+        path={path}
+        readOnly={readOnly}
+      />
       {(rows.length > 0 || (!valid && (showRequired || showMinRows))) && (
         <DraggableSortable
           className={`${baseClass}__rows`}

packages/ui/src/forms/NullifyField/index.scss

@@ -0,0 +1,14 @@
+@layer payload-default {
+  .nullify-locale-field {
+    margin-bottom: 0;
+    .field-type.checkbox {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+    }
+
+    + .array-field__add-row {
+      margin-top: calc(var(--base) / 2);
+    }
+  }
+}

packages/ui/src/forms/NullifyField/index.tsx

@@ -7,24 +7,31 @@ import { CheckboxField } from '../../fields/Checkbox/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
+import { useForm } from '../Form/context.js'
+import './index.scss'
+
+const baseClass = 'nullify-locale-field'
 
 type NullifyLocaleFieldProps = {
   readonly fieldValue?: [] | null | number
   readonly localized: boolean
   readonly path: string
+  readonly readOnly?: boolean
 }
 
 export const NullifyLocaleField: React.FC<NullifyLocaleFieldProps> = ({
   fieldValue,
   localized,
   path,
+  readOnly = false,
 }) => {
   const { code: currentLocale } = useLocale()
   const {
     config: { localization },
   } = useConfig()
   const [checked, setChecked] = React.useState<boolean>(typeof fieldValue !== 'number')
   const { t } = useTranslation()
+  const { dispatchFields, setModified } = useForm()
 
   if (!localized || !localization) {
     // hide when field is not localized or localization is not enabled
@@ -36,6 +43,18 @@ export const NullifyLocaleField: React.FC<NullifyLocaleFieldProps> = ({
     return null
   }
 
+  const onChange = () => {
+    const useFallback = !checked
+
+    dispatchFields({
+      type: 'UPDATE',
+      path,
+      value: useFallback ? null : fieldValue || 0,
+    })
+    setModified(true)
+    setChecked(useFallback)
+  }
+
   if (fieldValue) {
     let hideCheckbox = false
     if (typeof fieldValue === 'number' && fieldValue > 0) {
@@ -54,18 +73,22 @@ export const NullifyLocaleField: React.FC<NullifyLocaleFieldProps> = ({
   }
 
   return (
-    <Banner>
-      <CheckboxField
-        checked={checked}
-        field={{
-          name: '',
-          label: t('general:fallbackToDefaultLocale'),
-        }}
-        id={`field-${path.replace(/\./g, '__')}`}
-        path={path}
-        schemaPath=""
-        // onToggle={onChange}
-      />
+    <Banner className={baseClass}>
+      {!fieldValue && readOnly ? (
+        t('general:fallbackToDefaultLocale')
+      ) : (
+        <CheckboxField
+          checked={checked}
+          field={{
+            name: '',
+            label: t('general:fallbackToDefaultLocale'),
+          }}
+          id={`field-${path.replace(/\./g, '__')}`}
+          onChange={onChange}
+          path={path}
+          schemaPath=""
+        />
+      )}
     </Banner>
   )
 }

test/localization/collections/Array/index.ts

@@ -13,7 +13,6 @@ export const ArrayCollection: CollectionConfig = {
         {
           name: 'text',
           type: 'text',
-          required: true,
         },
       ],
     },

test/localization/collections/ArrayWithFallback/index.ts

@@ -0,0 +1,36 @@
+import type { CollectionConfig } from 'payload'
+
+import { arrayWithFallbackCollectionSlug } from '../../shared.js'
+
+export const ArrayWithFallbackCollection: CollectionConfig = {
+  slug: arrayWithFallbackCollectionSlug,
+  fields: [
+    {
+      name: 'items',
+      type: 'array',
+      localized: true,
+      required: true,
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      name: 'itemsReadOnly',
+      type: 'array',
+      localized: true,
+      admin: {
+        readOnly: true,
+      },
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+  ],
+}

test/localization/config.ts

@@ -9,6 +9,7 @@ import type { LocalizedPost } from './payload-types.js'
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
 import { ArrayCollection } from './collections/Array/index.js'
+import { ArrayWithFallbackCollection } from './collections/ArrayWithFallback/index.js'
 import { BlocksCollection } from './collections/Blocks/index.js'
 import { Group } from './collections/Group/index.js'
 import { LocalizedDateFields } from './collections/LocalizedDateFields/index.js'
@@ -397,6 +398,7 @@ export default buildConfigWithDefaults({
       ],
     },
     LocalizedWithinLocalized,
+    ArrayWithFallbackCollection,
   ],
   globals: [
     {