fix(ui): fallback localization data was appearing in document (#11743)

Author: JarrodMFlesch

packages/payload/src/utilities/addLocalesToRequest.ts

@@ -14,34 +14,39 @@ export function addLocalesToRequestFromData(req: PayloadRequest): void {
   } = req
 
   if (data) {
-    let localeOnReq = req.locale
-    let fallbackLocaleOnReq = req.fallbackLocale
+    const localeOnReq = req.locale
+    const fallbackLocaleOnReq = req.fallbackLocale
+    let localeFromData
+    let fallbackLocaleFromData
 
     if (!localeOnReq && data?.locale && typeof data.locale === 'string') {
-      localeOnReq = data.locale
+      localeFromData = data.locale
     }
 
     if (!fallbackLocaleOnReq) {
       if (data?.['fallback-locale'] && typeof data?.['fallback-locale'] === 'string') {
-        fallbackLocaleOnReq = data['fallback-locale']
+        fallbackLocaleFromData = data['fallback-locale']
       }
 
       if (data?.['fallbackLocale'] && typeof data?.['fallbackLocale'] === 'string') {
-        fallbackLocaleOnReq = data['fallbackLocale']
+        fallbackLocaleFromData = data['fallbackLocale']
       }
     }
 
-    const { fallbackLocale, locale } = sanitizeLocales({
-      fallbackLocale: fallbackLocaleOnReq,
-      locale: localeOnReq,
-      localization: config.localization,
-    })
+    if (!localeOnReq || !fallbackLocaleOnReq) {
+      const { fallbackLocale, locale } = sanitizeLocales({
+        fallbackLocale: fallbackLocaleFromData,
+        locale: localeFromData,
+        localization: config.localization,
+      })
 
-    if (locale) {
-      req.locale = locale
-    }
-    if (fallbackLocale) {
-      req.fallbackLocale = fallbackLocale
+      if (localeFromData) {
+        req.locale = locale
+      }
+
+      if (fallbackLocaleFromData) {
+        req.fallbackLocale = fallbackLocale
+      }
     }
   }
 }

packages/payload/src/utilities/createPayloadRequest.ts

@@ -11,7 +11,6 @@ import { getPayload } from '../index.js'
 import { sanitizeLocales } from './addLocalesToRequest.js'
 import { getRequestLanguage } from './getRequestLanguage.js'
 import { parseCookies } from './parseCookies.js'
-import { sanitizeFallbackLocale } from './sanitizeFallbackLocale.js'
 
 type Args = {
   config: Promise<SanitizedConfig> | SanitizedConfig
@@ -66,18 +65,13 @@ export const createPayloadRequest = async ({
     : {}
 
   if (localization) {
-    fallbackLocale = sanitizeFallbackLocale({
-      fallbackLocale,
-      locale,
-      localization,
-    })
-
     const locales = sanitizeLocales({
       fallbackLocale,
       locale,
       localization,
     })
 
+    fallbackLocale = locales.fallbackLocale
     locale = locales.locale
   }
 

packages/payload/src/utilities/sanitizeFallbackLocale.ts

@@ -20,12 +20,15 @@ export const sanitizeFallbackLocale = ({
   locale,
   localization,
 }: Args): null | string => {
-  const hasFallbackLocale =
-    fallbackLocale === undefined || fallbackLocale === null
-      ? localization && localization.fallback
-      : fallbackLocale
-        ? !['false', 'none', 'null'].includes(fallbackLocale)
-        : false
+  let hasFallbackLocale = false
+
+  if (fallbackLocale === undefined || fallbackLocale === null) {
+    hasFallbackLocale = Boolean(localization && localization.fallback)
+  }
+
+  if (fallbackLocale && !['false', 'none', 'null'].includes(fallbackLocale)) {
+    hasFallbackLocale = true
+  }
 
   if (hasFallbackLocale) {
     if (!fallbackLocale) {

test/localization/e2e.spec.ts

@@ -556,6 +556,30 @@ describe('Localization', () => {
 
       await cdpSession.detach()
     })
+
+    test('should not show fallback data after saving data', async () => {
+      await page.goto(url.create)
+      await changeLocale(page, defaultLocale)
+      await page.locator('#field-title').fill(title)
+
+      await saveDocAndAssert(page)
+      await changeLocale(page, spanishLocale)
+
+      // POST data
+      await page.locator('#field-description').fill('non-localized description')
+      await saveDocAndAssert(page)
+
+      // POST updated data
+      await page.locator('#field-description').fill('non-localized description 2')
+      await saveDocAndAssert(page)
+
+      // The title should not have posted with a value
+      await expect
+        .poll(() => page.locator('#field-title').inputValue(), {
+          timeout: POLL_TOPASS_TIMEOUT,
+        })
+        .not.toBe(title)
+    })
   })
 
   test('should use label in search filter when string or object', async () => {