Localized fields in relationship drawer are populated in the default locale, not in the current locale

[felixmokross]

Describe the Bug

When opening the Relationship drawer, localized fields of the related collection item are populated in the default locale instead of the current locale. Even though the field label correctly shows the current locale code, the value comes from the default locale.

In our application, we heavily rely on relationships with localized content in collections with many items. Therefore, this bug gives us a bit of a headache. We could give the users a workaround if the Relationship field or drawer had a link to the full page of the relationship item (this would generally be a handy feature). But currently, users have to open the drawer, copy the item ID, then go to the related collection and look up the item by ID.

I observed this issue already on 3.0, but was only now able to create a minimal reproduction.

Link to the code that reproduces this issue

https://github.com/felixmokross/payload/tree/locale-bug-repro/test/_community

Reproduction Steps

1. In the payload config, enable localization and add at least two locales:

// payload config
localization: {
     locales: ['en', 'es'],
     defaultLocale: 'en',
     fallback: true,
 },

2. Create a collection (A) with a localized field:

export const TextsCollection: CollectionConfig = {
   slug: 'texts',
   admin: {
     useAsTitle: 'text',
   },
   fields: [
     {
       name: 'text',
       type: 'text',
       localized: true,
     },
   ],
}

3. In another collection (B), add a relationship to the collection (A):

{
       name: 'title',
       type: 'relationship',
       relationTo: 'texts',
}

4. Create a new item of collection (A). In the localized field, save different values for the locales. E.g.
   en: 'hello'
   es: 'hola'
5. Create a new item of collection (B). In the relationship field, select the item from collection (A).
6. In the admin UI, switch to a locale that is not the default locale, e.g. es, while the default locale is en.
7. Open the Edit view of the newly created collection (B) item.
8. Click on the Pencil icon in the relationship field.

Observed behavior: The Relationship drawer opens. In the localized field the value is populated in the default locale ('hello'). However, the field's label indicates correctly the current locale.

Expected behavior: In the localized field the value is populated in the current locale ('hola').

Relationship drawer for the collection (A) item:

Edit view of the collection (A) item:

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Payload: 3.7.0
Node.js: 20.12.2
Next.js: 15.0.3

[gkennedy87]

@felixmokross Have you tried updating your versions of Payload, Next, and Node?

When I tried to reproduce the issue in Payload 3.9.0, it worked as expected.

[felixmokross]

I just checked with the latest main branch (did a pnpm install) and can still reproduce it. Are you sure you tested with different values per locale on the texts collection? And the bug only occurs on the Relationship Drawer, not on the full Edit View.

To me it seems that getDocumentData and renderDocument do not receive the locale arg. In the renderDocumentHandler it is not passed to the renderDocument function. Just not sure how to get the locale here.

This is from the handleServerFunction, I added the highlighted comment:

The locale on the initPageResult param is the only way how getDocumentData could know the locale, but it is not passed here.

[gkennedy87]

@felixmokross I was able to successfully reproduce this bug. Thanks for your clarification. I missed the step of clicking on the pencil icon in the relation drawer in my initial attempt.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

[github-actions]

🚀 This is included in version v3.13.0