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()