fix(ui): save button becomes disabled after failed save with draft validation (#14584)

### What?

Fixed an issue where the Save Draft button becomes disabled after a
failed save operation when draft validation is enabled, preventing users
from retrying without making additional form changes.

### Why?

When `versions.drafts.validate` is enabled, if a draft save fails (due
to validation errors, network issues, or server errors), the Save Draft
button would become disabled. This is problematic because:

1. Users cannot retry the save without making arbitrary changes to the
form
2. The behavior is inconsistent with unvalidated drafts, which always
allow saving
3. Transient failures (network errors, temporary third-party service
issues) become permanent blocks

The root cause: `setModified(false)` is called early in the submit flow
for ALL saves (line 365), which marks the form as "unmodified". When a
draft save subsequently fails, the form remains marked as unmodified,
which triggers the disabled state for the Save Draft button on update
operations (since `disabled = operation === 'update' && !modified`).

### How

- Added targeted logic in the error handler that explicitly restores the
modified state for failed draft saves
- When `overridesFromArgs['_status'] === 'draft'` and the save fails,
call `setModified(true)` to mark the form as modified again
- This ensures the Save Draft button remains enabled for retry on update
operations
- Also added `validateDrafts` to the submit callback's dependency array
to prevent stale closure issues

Fixes #14227

Author: PatrikKozak

packages/ui/src/forms/Form/index.tsx

@@ -411,8 +411,12 @@ export const Form: React.FC<FormProps> = (props) => {
 
           // When there was an error submitting a draft,
           // set the form state to unsubmitted, to not trigger visible form validation on changes after the failed submit.
-          if (!validateDrafts && overridesFromArgs['_status'] === 'draft') {
-            setSubmitted(false)
+          // Also keep the form as modified so the save button remains enabled for retry.
+          if (overridesFromArgs['_status'] === 'draft') {
+            setModified(true)
+            if (!validateDrafts) {
+              setSubmitted(false)
+            }
           }
 
           contextRef.current = { ...contextRef.current } // triggers rerender of all components that subscribe to form
@@ -494,6 +498,7 @@ export const Form: React.FC<FormProps> = (props) => {
       router,
       t,
       i18n,
+      validateDrafts,
       waitForAutocomplete,
     ],
   )

test/form-state/collections/DraftValidation/index.ts

@@ -0,0 +1,55 @@
+import type { CollectionConfig } from 'payload'
+
+export const draftValidationSlug = 'draft-validation'
+
+/**
+ * This collection tests the behavior of draft validation and save button state.
+ * Specifically, it tests that the save button remains enabled after a failed save,
+ * allowing users to retry without making additional form changes.
+ */
+export const DraftValidationCollection: CollectionConfig = {
+  slug: draftValidationSlug,
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'failValidation',
+      type: 'checkbox',
+      admin: {
+        description:
+          'Check this box to simulate a validation failure. The save button should remain enabled after the failure.',
+      },
+      defaultValue: false,
+    },
+    {
+      name: 'validatedField',
+      type: 'text',
+      admin: {
+        description:
+          'This field will fail validation if "Fail Validation" checkbox is checked. This simulates validation failures from business logic, network errors, or third-party validation.',
+      },
+      validate: (value, { data }) => {
+        // Simulate a validation failure based on the checkbox state
+        if (data?.failValidation) {
+          return 'Validation failed: This is a simulated validation error to test save button behavior.'
+        }
+        return true
+      },
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+    },
+  ],
+  versions: {
+    drafts: {
+      validate: true,
+    },
+  },
+}

test/form-state/config.ts

@@ -4,13 +4,14 @@ import path from 'path'
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
 import { AutosavePostsCollection } from './collections/Autosave/index.js'
+import { DraftValidationCollection } from './collections/DraftValidation/index.js'
 import { PostsCollection, postsSlug } from './collections/Posts/index.js'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 export default buildConfigWithDefaults({
-  collections: [PostsCollection, AutosavePostsCollection],
+  collections: [PostsCollection, AutosavePostsCollection, DraftValidationCollection],
   admin: {
     importMap: {
       baseDir: path.resolve(dirname),

test/form-state/e2e.spec.ts

@@ -30,6 +30,7 @@ import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import { autosavePostsSlug } from './collections/Autosave/index.js'
+import { draftValidationSlug } from './collections/DraftValidation/index.js'
 import { postsSlug } from './collections/Posts/index.js'
 
 const { describe, beforeEach, afterEach } = test
@@ -649,6 +650,54 @@ test.describe('Form State', () => {
       )
     })
   })
+
+  test.describe('Draft Validation', () => {
+    let draftValidationUrl: AdminUrlUtil
+
+    test.beforeAll(() => {
+      draftValidationUrl = new AdminUrlUtil(serverURL, draftValidationSlug)
+    })
+
+    test('should keep save draft button enabled after validation failure on update', async () => {
+      // Create a document successfully
+      await page.goto(draftValidationUrl.create)
+      await page.locator('#field-title').fill('Test Document')
+      await page.locator('#field-validatedField').fill('Valid data')
+      await page.click('#action-save-draft')
+      await expect(page.locator('.payload-toast-container .toast-success')).toBeVisible()
+
+      await page.waitForURL(/\/admin\/collections\/draft-validation\/[a-zA-Z0-9]+/)
+
+      // Modify document to trigger validation failure
+      await page.locator('#field-title').fill('Modified Document')
+      await page.locator('#field-failValidation').check()
+      await page.locator('#field-validatedField').fill('This will fail validation')
+
+      await page.click('#action-save-draft')
+      await expect(page.locator('.payload-toast-container .toast-error')).toBeVisible()
+
+      // Save Draft button should remain enabled after failed save
+      const saveDraftButton = page.locator('#action-save-draft')
+      await expect(saveDraftButton).toBeEnabled()
+
+      // Verify we can retry without additional changes
+      await page.click('#action-save-draft')
+      await expect(page.locator('.payload-toast-container .toast-error')).toBeVisible()
+    })
+
+    test('should keep save draft button enabled after successful save when form is modified again', async () => {
+      await page.goto(draftValidationUrl.create)
+      await page.locator('#field-title').fill('Test Document')
+      await page.locator('#field-validatedField').fill('Valid data')
+      await page.click('#action-save-draft')
+      await expect(page.locator('.payload-toast-container .toast-success')).toBeVisible()
+
+      await page.locator('#field-title').fill('Modified Document')
+
+      const saveDraftButton = page.locator('#action-save-draft')
+      await expect(saveDraftButton).toBeEnabled()
+    })
+  })
 })
 
 async function createPost(overrides?: Partial<Post>): Promise<Post> {

test/form-state/payload-types.ts

@@ -69,6 +69,8 @@ export interface Config {
   collections: {
     posts: Post;
     'autosave-posts': AutosavePost;
+    'draft-validation': DraftValidation;
+    'payload-kv': PayloadKv;
     users: User;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -78,6 +80,8 @@ export interface Config {
   collectionsSelect: {
     posts: PostsSelect<false> | PostsSelect<true>;
     'autosave-posts': AutosavePostsSelect<false> | AutosavePostsSelect<true>;
+    'draft-validation': DraftValidationSelect<false> | DraftValidationSelect<true>;
+    'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -175,6 +179,43 @@ export interface AutosavePost {
   createdAt: string;
   _status?: ('draft' | 'published') | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "draft-validation".
+ */
+export interface DraftValidation {
+  id: string;
+  title: string;
+  /**
+   * Check this box to simulate a validation failure. The save button should remain enabled after the failure.
+   */
+  failValidation?: boolean | null;
+  /**
+   * This field will fail validation if "Fail Validation" checkbox is checked. This simulates validation failures from business logic, network errors, or third-party validation.
+   */
+  validatedField?: string | null;
+  description?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv".
+ */
+export interface PayloadKv {
+  id: string;
+  key: string;
+  data:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -214,6 +255,10 @@ export interface PayloadLockedDocument {
         relationTo: 'autosave-posts';
         value: string | AutosavePost;
       } | null)
+    | ({
+        relationTo: 'draft-validation';
+        value: string | DraftValidation;
+      } | null)
     | ({
         relationTo: 'users';
         value: string | User;
@@ -314,6 +359,27 @@ export interface AutosavePostsSelect<T extends boolean = true> {
   createdAt?: T;
   _status?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "draft-validation_select".
+ */
+export interface DraftValidationSelect<T extends boolean = true> {
+  title?: T;
+  failValidation?: T;
+  validatedField?: T;
+  description?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  _status?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv_select".
+ */
+export interface PayloadKvSelect<T extends boolean = true> {
+  key?: T;
+  data?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".