fix(next): autosave document rendering (#9364)

Closes #9242 and #9365. Autosave-enabled documents rendered within a
drawer were not being properly handled. This was causing multiple draft
documents to be created upon opening the drawer, as well as an empty
document returned from the server function, etc.

test/fields-relationship/e2e.spec.ts

@@ -179,10 +179,9 @@ describe('fields - relationship', () => {
     await expect(options).toHaveCount(2) // two docs
     await options.nth(0).click()
     await expect(field).toContainText(relationOneDoc.id)
-    await saveDocAndAssert(page)
-    await wait(200)
-    await trackNetworkRequests(page, `/api/${relationOneSlug}`, {
-      beforePoll: async () => await page.reload(),
+    await trackNetworkRequests(page, `/api/${relationOneSlug}`, async () => {
+      await saveDocAndAssert(page)
+      await wait(200)
     })
   })
 

test/helpers/e2e/trackNetworkRequests.ts

@@ -8,6 +8,7 @@ import { expect } from '@playwright/test'
 export const trackNetworkRequests = async (
   page: Page,
   url: string,
+  action: () => Promise<any>,
   options?: {
     allowedNumberOfRequests?: number
     beforePoll?: () => Promise<any> | void
@@ -26,6 +27,8 @@ export const trackNetworkRequests = async (
     }
   })
 
+  await action()
+
   if (typeof beforePoll === 'function') {
     await beforePoll()
   }

test/versions/e2e.spec.ts

@@ -25,6 +25,7 @@
 import type { BrowserContext, Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -43,6 +44,7 @@ import {
   throttleTest,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
+import { trackNetworkRequests } from '../helpers/e2e/trackNetworkRequests.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../helpers/reInitializeDB.js'
 import { waitForAutoSaveToRunAndComplete } from '../helpers/waitForAutoSaveToRunAndComplete.js'
@@ -394,6 +396,42 @@ describe('versions', () => {
       expect(page.url()).toMatch(/\/versions$/)
     })
 
+    test('collection - should autosave', async () => {
+      await page.goto(autosaveURL.create)
+      await page.locator('#field-title').fill('autosave title')
+      await waitForAutoSaveToRunAndComplete(page)
+      await expect(page.locator('#field-title')).toHaveValue('autosave title')
+
+      const { id: postID } = await payload.create({
+        collection: postCollectionSlug,
+        data: {
+          title: 'post title',
+          description: 'post description',
+        },
+      })
+
+      await page.goto(postURL.edit(postID))
+
+      await trackNetworkRequests(
+        page,
+        `${serverURL}/admin/collections/${postCollectionSlug}/${postID}`,
+        async () => {
+          await page
+            .locator(
+              '#field-relationToAutosaves.field-type.relationship .relationship-add-new__add-button.doc-drawer__toggler',
+            )
+            .click()
+        },
+        {
+          allowedNumberOfRequests: 1,
+        },
+      )
+
+      const drawer = page.locator('[id^=doc-drawer_autosave-posts_1_]')
+      await expect(drawer).toBeVisible()
+      await expect(drawer.locator('.id-label')).toBeVisible()
+    })
+
     test('global - should autosave', async () => {
       const url = new AdminUrlUtil(serverURL, autoSaveGlobalSlug)
       await page.goto(url.global(autoSaveGlobalSlug))