diff --git a/packages/core/src/response.ts b/packages/core/src/response.ts
index bbd43b890..331cc2031 100644
--- a/packages/core/src/response.ts
+++ b/packages/core/src/response.ts
@@ -87,6 +87,13 @@ export class Response {
await this.setPage()
+ const { flash } = currentPage.get()
+
+ if (Object.keys(flash).length > 0 && !this.requestParams.isDeferredPropsRequest()) {
+ fireFlashEvent(flash)
+ this.requestParams.all().onFlash(flash)
+ }
+
const errors = currentPage.get().props.errors || {}
if (Object.keys(errors).length > 0) {
@@ -105,13 +112,6 @@ export class Response {
router.flush(currentPage.get().url)
}
- const { flash } = currentPage.get()
-
- if (Object.keys(flash).length > 0 && !this.requestParams.isDeferredPropsRequest()) {
- fireFlashEvent(flash)
- this.requestParams.all().onFlash(flash)
- }
-
fireSuccessEvent(currentPage.get())
await this.requestParams.all().onSuccess(currentPage.get())
diff --git a/packages/react/test-app/Pages/Flash/Events.tsx b/packages/react/test-app/Pages/Flash/Events.tsx
index f114c98dd..898528d6a 100644
--- a/packages/react/test-app/Pages/Flash/Events.tsx
+++ b/packages/react/test-app/Pages/Flash/Events.tsx
@@ -42,6 +42,28 @@ export default () => {
)
}
+ const visitWithErrorsAndFlash = () => {
+ router.on('flash', (event) => {
+ internalAlert('Inertia.on(flash)')
+ internalAlert(event.detail.flash)
+ })
+
+ router.post(
+ '/flash/events/with-errors',
+ {},
+ {
+ onFlash: (flash) => {
+ internalAlert('onFlash')
+ internalAlert(flash)
+ },
+ onError: (errors) => {
+ internalAlert('onError')
+ internalAlert(errors)
+ },
+ },
+ )
+ }
+
const visitWithoutFlash = () => {
router.on('flash', () => {
internalAlert('Inertia.on(flash)')
@@ -83,6 +105,16 @@ export default () => {
>
Visit with flash
+ {
+ e.preventDefault()
+ visitWithErrorsAndFlash()
+ }}
+ className="with-errors-and-flash"
+ >
+ Visit with errors and flash
+
{
diff --git a/packages/svelte/test-app/Pages/Flash/Events.svelte b/packages/svelte/test-app/Pages/Flash/Events.svelte
index b6192cc8a..d61acb3ff 100644
--- a/packages/svelte/test-app/Pages/Flash/Events.svelte
+++ b/packages/svelte/test-app/Pages/Flash/Events.svelte
@@ -44,6 +44,30 @@
)
}
+ const visitWithErrorsAndFlash = (e: Event) => {
+ e.preventDefault()
+
+ router.on('flash', (event) => {
+ internalAlert('Inertia.on(flash)')
+ internalAlert(event.detail.flash)
+ })
+
+ router.post(
+ '/flash/events/with-errors',
+ {},
+ {
+ onFlash: (flash) => {
+ internalAlert('onFlash')
+ internalAlert(flash)
+ },
+ onError: (errors) => {
+ internalAlert('onError')
+ internalAlert(errors)
+ },
+ },
+ )
+ }
+
const visitWithoutFlash = (e: Event) => {
e.preventDefault()
@@ -80,6 +104,7 @@
{JSON.stringify(page.flash)}
Visit with flash
+ Visit with errors and flash
Visit without flash
Navigate away
diff --git a/packages/vue3/test-app/Pages/Flash/Events.vue b/packages/vue3/test-app/Pages/Flash/Events.vue
index f1ce721b6..cf2dcdd51 100644
--- a/packages/vue3/test-app/Pages/Flash/Events.vue
+++ b/packages/vue3/test-app/Pages/Flash/Events.vue
@@ -42,6 +42,28 @@ const visitWithFlash = () => {
)
}
+const visitWithErrorsAndFlash = () => {
+ router.on('flash', (event) => {
+ internalAlert('Inertia.on(flash)')
+ internalAlert(event.detail.flash)
+ })
+
+ router.post(
+ '/flash/events/with-errors',
+ {},
+ {
+ onFlash: (flash) => {
+ internalAlert('onFlash')
+ internalAlert(flash)
+ },
+ onError: (errors) => {
+ internalAlert('onError')
+ internalAlert(errors)
+ },
+ },
+ )
+}
+
const visitWithoutFlash = () => {
router.on('flash', () => {
internalAlert('Inertia.on(flash)')
@@ -75,6 +97,7 @@ const navigateAway = () => {
{{ JSON.stringify(page.flash) }}
Visit with flash
+ Visit with errors and flash
Visit without flash
Navigate away
diff --git a/tests/app/server.js b/tests/app/server.js
index d3990da85..7de1a243d 100644
--- a/tests/app/server.js
+++ b/tests/app/server.js
@@ -2420,6 +2420,13 @@ app.post('/flash/events/with-data', (req, res) =>
}),
)
app.post('/flash/events/without-data', (req, res) => inertia.render(req, res, { component: 'Flash/Events' }))
+app.post('/flash/events/with-errors', (req, res) =>
+ inertia.render(req, res, {
+ component: 'Flash/Events',
+ props: { errors: { name: 'The name field is required.' } },
+ flash: { foo: 'bar' },
+ }),
+)
app.get('/flash/initial', (req, res) =>
inertia.render(req, res, {
component: 'Flash/InitialFlash',
diff --git a/tests/flash.spec.ts b/tests/flash.spec.ts
index 0acec3806..2ca3cbf65 100644
--- a/tests/flash.spec.ts
+++ b/tests/flash.spec.ts
@@ -133,6 +133,21 @@ test.describe('Flash Data', () => {
expect(flashAfter).toBe('{}')
})
+ test('receives flash data and fires event callbacks when there are errors', async ({ page }) => {
+ await page.getByRole('link', { name: 'Visit with errors and flash' }).click()
+
+ const messages = await waitForMessages(page, 6)
+
+ expect(messages).toEqual([
+ 'Inertia.on(flash)',
+ { foo: 'bar' },
+ 'onFlash',
+ { foo: 'bar' },
+ 'onError',
+ { name: 'The name field is required.' },
+ ])
+ })
+
test('does not fire flash event when no flash data is present', async ({ page }) => {
await page.getByRole('link', { name: 'Visit without flash' }).click()