feat: adds showSaveDraftButton option to show draft button with autosave enabled (#12150)

This adds a new `showSaveDraftButton` option to the
`versions.drafts.autosave` config for collections and globals.

By default, the "Save as draft" button is hidden when autosave is
enabled. This new option allows the button to remain visible for manual
saves while autosave is active.

Also updates the admin UI logic to conditionally render the button when
this flag is set, and updates the documentation with an example usage.

Author: PatrikKozak

docs/versions/autosave.mdx

@@ -22,6 +22,7 @@ Collections and Globals both support the same options for configuring autosave.
 | Drafts Autosave Options | Description                                                                                                                                                           |
 | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `interval`              | Define an `interval` in milliseconds to automatically save progress while documents are edited. Document updates are "debounced" at this interval. Defaults to `800`. |
+| `showSaveDraftButton`   | Set this to `true` to show the "Save as draft" button even while autosave is enabled. Defaults to `false`.                                                            |
 
 **Example config with versions, drafts, and autosave enabled:**
 
@@ -50,9 +51,13 @@ export const Pages: CollectionConfig = {
     drafts: {
       autosave: true,
 
-      // Alternatively, you can specify an `interval`:
+      // Alternatively, you can specify an object to customize autosave:
       // autosave: {
+      // Define how often the document should be autosaved (in milliseconds)
       //   interval: 1500,
+      //
+      // Show the "Save as draft" button even while autosave is enabled
+      //   showSaveDraftButton: true,
       // },
     },
   },

packages/payload/src/versions/types.ts

@@ -6,6 +6,13 @@ export type Autosave = {
    * @default 800
    */
   interval?: number
+  /**
+   * When set to `true`, the "Save as draft" button will be displayed even while autosave is enabled.
+   * By default, this button is hidden to avoid redundancy with autosave behavior.
+   *
+   * @default false
+   */
+  showSaveDraftButton?: boolean
 }
 
 export type SchedulePublish = {

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

@@ -133,9 +133,23 @@ export const DocumentControls: React.FC<{
   const unsavedDraftWithValidations =
     !id && collectionConfig?.versions?.drafts && collectionConfig.versions?.drafts.validate
 
+  const collectionConfigDrafts = collectionConfig?.versions?.drafts
+  const globalConfigDrafts = globalConfig?.versions?.drafts
+
   const autosaveEnabled =
-    (collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.autosave) ||
-    (globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave)
+    (collectionConfigDrafts && collectionConfigDrafts?.autosave) ||
+    (globalConfigDrafts && globalConfigDrafts?.autosave)
+
+  const collectionAutosaveEnabled = collectionConfigDrafts && collectionConfigDrafts?.autosave
+  const globalAutosaveEnabled = globalConfigDrafts && globalConfigDrafts?.autosave
+
+  const showSaveDraftButton =
+    (collectionAutosaveEnabled &&
+      collectionConfigDrafts.autosave !== false &&
+      collectionConfigDrafts.autosave.showSaveDraftButton === true) ||
+    (globalAutosaveEnabled &&
+      globalConfigDrafts.autosave !== false &&
+      globalConfigDrafts.autosave.showSaveDraftButton === true)
 
   const showCopyToLocale = localization && !collectionConfig?.admin?.disableCopyToLocale
 
@@ -218,7 +232,9 @@ export const DocumentControls: React.FC<{
               <Fragment>
                 {collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts ? (
                   <Fragment>
-                    {(unsavedDraftWithValidations || !autosaveEnabled) && (
+                    {(unsavedDraftWithValidations ||
+                      !autosaveEnabled ||
+                      (autosaveEnabled && showSaveDraftButton)) && (
                       <RenderCustomComponent
                         CustomComponent={CustomSaveDraftButton}
                         Fallback={<SaveDraftButton />}

test/versions/collections/AutosaveWithDraftButton.ts

@@ -0,0 +1,32 @@
+import type { CollectionConfig } from 'payload'
+
+import { autosaveWithDraftButtonSlug } from '../slugs.js'
+
+const AutosaveWithDraftButtonPosts: CollectionConfig = {
+  slug: autosaveWithDraftButtonSlug,
+  labels: {
+    singular: 'Autosave with Draft Button Post',
+    plural: 'Autosave with Draft Button Posts',
+  },
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'subtitle', 'createdAt', '_status'],
+  },
+  versions: {
+    drafts: {
+      autosave: {
+        showSaveDraftButton: true,
+        interval: 1000,
+      },
+    },
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+  ],
+}
+
+export default AutosaveWithDraftButtonPosts

test/versions/config.ts

@@ -4,6 +4,7 @@ const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import AutosavePosts from './collections/Autosave.js'
+import AutosaveWithDraftButtonPosts from './collections/AutosaveWithDraftButton.js'
 import AutosaveWithValidate from './collections/AutosaveWithValidate.js'
 import CustomIDs from './collections/CustomIDs.js'
 import { Diff } from './collections/Diff/index.js'
@@ -17,6 +18,7 @@ import Posts from './collections/Posts.js'
 import { TextCollection } from './collections/Text.js'
 import VersionPosts from './collections/Versions.js'
 import AutosaveGlobal from './globals/Autosave.js'
+import AutosaveWithDraftButtonGlobal from './globals/AutosaveWithDraftButton.js'
 import DisablePublishGlobal from './globals/DisablePublish.js'
 import DraftGlobal from './globals/Draft.js'
 import DraftWithMaxGlobal from './globals/DraftWithMax.js'
@@ -35,6 +37,7 @@ export default buildConfigWithDefaults({
     DisablePublish,
     Posts,
     AutosavePosts,
+    AutosaveWithDraftButtonPosts,
     AutosaveWithValidate,
     DraftPosts,
     DraftWithMax,
@@ -46,7 +49,14 @@ export default buildConfigWithDefaults({
     TextCollection,
     Media,
   ],
-  globals: [AutosaveGlobal, DraftGlobal, DraftWithMaxGlobal, DisablePublishGlobal, LocalizedGlobal],
+  globals: [
+    AutosaveGlobal,
+    AutosaveWithDraftButtonGlobal,
+    DraftGlobal,
+    DraftWithMaxGlobal,
+    DisablePublishGlobal,
+    LocalizedGlobal,
+  ],
   indexSortableFields: true,
   localization: {
     defaultLocale: 'en',