fix(ui): keep hierarchy create drawers open during autosave

packages/ui/src/elements/CreateDocumentButton/index.tsx

@@ -2,6 +2,7 @@
 
 import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
+import { hasAutosaveEnabled } from 'payload/shared'
 import React, { useState } from 'react'
 
 import type { Props as ButtonProps } from '../Button/types.js'
@@ -70,7 +71,10 @@ export function CreateDocumentButton({
   }
 
   const handleSave: DocumentDrawerContextProps['onSave'] = (args) => {
-    closeModal(drawerSlug)
+    if (!hasAutosaveEnabled(args.collectionConfig)) {
+      closeModal(drawerSlug)
+    }
+
     return onSave?.(args)
   }
 

test/hierarchy/config.ts

@@ -181,7 +181,11 @@ export const Organizations: CollectionConfig = {
     parentFieldName: 'parent',
   },
   versions: {
-    drafts: true,
+    drafts: {
+      autosave: {
+        interval: 1000,
+      },
+    },
   },
 }
 

test/hierarchy/e2e.spec.ts

@@ -429,6 +429,68 @@ test.describe('Hierarchy Sidebar', () => {
       }
     })
 
+    test.describe('Autosave create drawer', () => {
+      let organizationTitle: string
+
+      test.afterEach(async () => {
+        const createdOrganizations = await payload.find({
+          collection: 'organizations',
+          draft: true,
+          where: { title: { equals: organizationTitle } },
+        })
+
+        for (const organization of createdOrganizations.docs) {
+          await payload.delete({ id: organization.id, collection: 'organizations' })
+        }
+      })
+
+      test('should keep autosave drawer open when creating an allowed document in a folder hierarchy', async () => {
+        test.setTimeout(TEST_TIMEOUT_LONG)
+        organizationTitle = `Autosave Organization ${Date.now()}`
+
+        const multiTypeFolders = await payload.find({
+          collection: 'folders',
+          limit: 1,
+          where: { name: { equals: 'Orgs and Products' } },
+        })
+        const multiTypeFolder = multiTypeFolders.docs[0]
+
+        await page.goto(organizationsURL.list)
+        await page.goto(`${foldersURL.hierarchy}?parentFolder=${multiTypeFolder.id}`)
+
+        const listControls = page.locator('.hierarchy-list__controls')
+        await listControls.getByRole('button', { name: 'Create New' }).first().click()
+
+        await expect(page.getByRole('button', { name: 'Organization', exact: true })).toBeVisible()
+        await expect(page.getByRole('button', { name: 'Product', exact: true })).toBeVisible()
+        await page.getByRole('button', { name: 'Organization', exact: true }).click()
+
+        const drawer = page.locator('#hierarchy-create-folders')
+        const titleInput = drawer.locator('#field-title')
+
+        await expect(drawer).toBeVisible()
+        await titleInput.fill(organizationTitle)
+
+        await expect
+          .poll(async () => {
+            const autosavedOrganizations = await payload.find({
+              collection: 'organizations',
+              depth: 0,
+              draft: true,
+              where: { title: { equals: organizationTitle } },
+            })
+
+            return autosavedOrganizations.docs[0]?.parentFolder
+          })
+          .toBe(multiTypeFolder.id)
+
+        await expect(drawer).toBeVisible()
+        await expect(titleInput).toHaveValue(organizationTitle)
+        await drawer.locator('.doc-drawer__header-close').click()
+        await expect(drawer).toBeHidden()
+      })
+    })
+
     test('should show filter button when collectionSpecific is configured', async () => {
       await page.goto(foldersURL.list)
       await openNav(page)