Make isDirty reactive to defaults

packages/react/package.json

@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@inertiajs/core": "2.0.5",
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "^4.5.0",
+    "lodash.clonedeep": "^4.5.0"
   }
 }

packages/react/src/useForm.ts

@@ -1,4 +1,5 @@
 import { FormDataConvertible, Method, Progress, router, VisitOptions } from '@inertiajs/core'
+import cloneDeep from 'lodash.clonedeep'
 import isEqual from 'lodash.isequal'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import useRemember from './useRemember'
@@ -111,6 +112,7 @@ export default function useForm<TForm extends FormDataType>(
             setHasErrors(false)
             setWasSuccessful(true)
             setRecentlySuccessful(true)
+            setDefaults(cloneDeep(data))
             recentlySuccessfulTimeoutId.current = setTimeout(() => {
               if (isMounted.current) {
                 setRecentlySuccessful(false)

packages/react/test-app/Pages/FormHelper/Dirty.jsx

@@ -0,0 +1,29 @@
+import { useForm } from '@inertiajs/react'
+
+export default (props) => {
+  const form = useForm({ name: 'foo' })
+
+  const submit = () => {
+    form.post('')
+  }
+
+  return (
+    <div>
+      <div>Form is {form.isDirty ? 'dirty' : 'clean'}</div>
+      <label>
+        Full Name
+        <input
+          type="text"
+          id="name"
+          name="name"
+          onChange={(e) => form.setData('name', e.target.value)}
+          value={form.data.name}
+        />
+      </label>
+
+      <button onClick={submit} className="submit">
+        Submit form
+      </button>
+    </div>
+  )
+}

packages/svelte/src/useForm.ts

@@ -183,6 +183,7 @@ export default function useForm<TForm extends FormDataType>(
           this.clearErrors()
           this.setStore('wasSuccessful', true)
           this.setStore('recentlySuccessful', true)
+          this.defaults(cloneDeep(this.data()))
           recentlySuccessfulTimeoutId = setTimeout(() => this.setStore('recentlySuccessful', false), 2000)
 
           if (options.onSuccess) {

packages/svelte/test-app/Pages/FormHelper/Dirty.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { useForm } from '@inertiajs/svelte'
+
+  const form = useForm({
+    name: 'foo',
+  })
+
+  const submit = () => {
+    $form.post('')
+  }
+</script>
+
+<div>
+    <div>Form is {#if $form.isDirty}dirty{:else}clean{/if}</div>
+  <label>
+    Full Name
+    <input type="text" id="name" name="name" bind:value={$form.name} />
+  </label>
+
+  <button on:click={submit} class="submit">Submit form</button>
+</div>

packages/vue3/test-app/Pages/FormHelper/Dirty.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { useForm } from '@inertiajs/vue3'
+const form = useForm({ name: 'foo' })
+
+const submit = () => {
+  form.post('')
+}
+</script>
+
+<template>
+  <div>
+    <div>Form is <span v-if="form.isDirty">dirty</span><span v-else>clean</span></div>
+    <label>
+      Full Name
+      <input type="text" id="name" name="name" v-model="form.name" />
+    </label>
+
+    <button @click="submit" class="submit">Submit form</button>
+  </div>
+</template>

tests/app/server.js

@@ -128,6 +128,15 @@ app.post('/form-helper/data', (req, res) =>
   }),
 )
 
+app.get('/form-helper/dirty', (req, res) =>
+  inertia.render(req, res, {
+    component: 'FormHelper/Dirty',
+    props: {},
+  }),
+)
+
+app.post('/form-helper/dirty', (req, res) => res.redirect(303, '/form-helper/dirty'))
+
 app.post('/form-helper/errors', (req, res) =>
   inertia.render(req, res, {
     component: 'FormHelper/Errors',

tests/form-helper.spec.ts

@@ -235,6 +235,22 @@ test.describe('Form Helper', () => {
     })
   })
 
+  test.describe('Dirty', () => {
+    test.beforeEach(async ({ page }) => {
+      pageLoads.watch(page)
+      page.goto('/form-helper/dirty')
+    })
+
+    test('can check if the form is dirty', async ({ page }) => {
+      await expect(page.getByText('Form is clean')).toBeVisible()
+      await page.fill('#name', 'Joe')
+      await expect(page.locator('#name')).toHaveValue('Joe')
+      await expect(page.getByText('Form is dirty')).toBeVisible()
+      await page.getByRole('button', { name: 'Submit form' }).click()
+      await expect(page.getByText('Form is clean')).toBeVisible()
+    })
+  })
+
   test.describe('Data', () => {
     test.beforeEach(async ({ page }) => {
       pageLoads.watch(page)