fix(2.0): ensures relationTo as array fields load returned data from form correctly (#3318)

packages/payload/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx

@@ -97,7 +97,7 @@ const Content: React.FC<DocumentDrawerProps> = ({
   const apiURL = id ? `${serverURL}${api}/${collectionSlug}/${id}?locale=${locale}` : null
   const action = `${serverURL}${api}/${collectionSlug}${
     id ? `/${id}` : ''
-  }?locale=${locale}&depth=0&fallback-locale=null`
+  }?locale=${locale}&fallback-locale=null`
   const hasSavePermission =
     (isEditing && docPermissions?.update?.permission) ||
     (!isEditing && (docPermissions as CollectionPermission)?.create?.permission)

packages/payload/src/admin/components/elements/Status/index.tsx

@@ -61,11 +61,11 @@ const Status: React.FC = () => {
       }
 
       if (collection) {
-        url = `${serverURL}${api}/${collection.slug}/${id}?depth=0&locale=${locale}&fallback-locale=null`
+        url = `${serverURL}${api}/${collection.slug}/${id}?locale=${locale}&fallback-locale=null`
         method = 'patch'
       }
       if (global) {
-        url = `${serverURL}${api}/globals/${global.slug}?depth=0&locale=${locale}&fallback-locale=null`
+        url = `${serverURL}${api}/globals/${global.slug}?locale=${locale}&fallback-locale=null`
         method = 'post'
       }
 

packages/payload/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts

@@ -269,6 +269,15 @@ export const addFieldStatePromise = async ({
         if (field.hasMany) {
           const relationshipValue = Array.isArray(valueWithDefault)
             ? valueWithDefault.map((relationship) => {
+                if (Array.isArray(field.relationTo)) {
+                  return {
+                    relationTo: relationship.relationTo,
+                    value:
+                      typeof relationship.value === 'string'
+                        ? relationship.value
+                        : relationship.value?.id,
+                  }
+                }
                 if (typeof relationship === 'object' && relationship !== null) {
                   return relationship.id
                 }
@@ -278,8 +287,24 @@ export const addFieldStatePromise = async ({
 
           fieldState.value = relationshipValue
           fieldState.initialValue = relationshipValue
-
-          state[`${path}${field.name}`] = fieldState
+        } else if (Array.isArray(field.relationTo)) {
+          if (
+            valueWithDefault &&
+            typeof valueWithDefault === 'object' &&
+            'relationTo' in valueWithDefault &&
+            'value' in valueWithDefault
+          ) {
+            const value =
+              typeof valueWithDefault?.value === 'object' && 'id' in valueWithDefault.value
+                ? valueWithDefault.value.id
+                : valueWithDefault.value
+            const relationshipValue = {
+              relationTo: valueWithDefault?.relationTo,
+              value,
+            }
+            fieldState.value = relationshipValue
+            fieldState.initialValue = relationshipValue
+          }
         } else {
           const relationshipValue =
             valueWithDefault && typeof valueWithDefault === 'object' && 'id' in valueWithDefault
@@ -287,10 +312,10 @@ export const addFieldStatePromise = async ({
               : valueWithDefault
           fieldState.value = relationshipValue
           fieldState.initialValue = relationshipValue
-
-          state[`${path}${field.name}`] = fieldState
         }
 
+        state[`${path}${field.name}`] = fieldState
+
         break
       }
 

packages/payload/src/admin/components/views/Account/index.tsx

@@ -57,7 +57,7 @@ const AccountView: React.FC = () => {
   const dataToRender = locationState?.data || data
   const apiURL = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}`
 
-  const action = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}&depth=0`
+  const action = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}`
 
   const onSave = React.useCallback(
     async (json: any) => {

test/fields-relationship/e2e.spec.ts

@@ -135,6 +135,32 @@ describe('fields - relationship', () => {
     await saveDocAndAssert(page)
   })
 
+  test('should create relations to multiple collections', async () => {
+    await page.goto(url.create)
+
+    const field = page.locator('#field-relationshipMultiple')
+    const value = page.locator('#field-relationshipMultiple .relationship--single-value__text')
+
+    await field.click({ delay: 100 })
+
+    const options = page.locator('.rs__option')
+
+    await expect(options).toHaveCount(3) // 3 docs
+
+    // Add one relationship
+    await options.locator(`text=${relationOneDoc.id}`).click()
+    await expect(value).toContainText(relationOneDoc.id)
+
+    // Add relationship of different collection
+    await field.click({ delay: 100 })
+    await options.locator(`text=${relationTwoDoc.id}`).click()
+    await expect(value).toContainText(relationTwoDoc.id)
+
+    await saveDocAndAssert(page)
+    await wait(200)
+    await expect(value).toContainText(relationTwoDoc.id)
+  })
+
   test('should create hasMany relationship', async () => {
     await page.goto(url.create)
 
@@ -162,30 +188,35 @@ describe('fields - relationship', () => {
     await expect(page.locator('.rs__menu')).toHaveText('No options')
 
     await saveDocAndAssert(page)
+    await wait(200)
+    await expect(values).toHaveText([relationOneDoc.id, anotherRelationOneDoc.id])
   })
 
-  test('should create relations to multiple collections', async () => {
+  test('should create many relations to multiple collections', async () => {
     await page.goto(url.create)
 
-    const field = page.locator('#field-relationshipMultiple')
-    const value = page.locator('#field-relationshipMultiple .relationship--single-value__text')
-
+    const field = page.locator('#field-relationshipHasManyMultiple')
     await field.click({ delay: 100 })
 
     const options = page.locator('.rs__option')
+    await expect(options).toHaveCount(3)
 
-    await expect(options).toHaveCount(3) // 3 docs
+    const values = page.locator(
+      '#field-relationshipHasManyMultiple .relationship--multi-value-label__text',
+    )
 
     // Add one relationship
     await options.locator(`text=${relationOneDoc.id}`).click()
-    await expect(value).toContainText(relationOneDoc.id)
+    await expect(values).toHaveText([relationOneDoc.id])
 
-    // Add relationship of different collection
+    // Add second relationship
     await field.click({ delay: 100 })
     await options.locator(`text=${relationTwoDoc.id}`).click()
-    await expect(value).toContainText(relationTwoDoc.id)
+    await expect(values).toHaveText([relationOneDoc.id, relationTwoDoc.id])
 
     await saveDocAndAssert(page)
+    await wait(200)
+    await expect(values).toHaveText([relationOneDoc.id, relationTwoDoc.id])
   })
 
   test('should duplicate document with relationships', async () => {