[3.x] Fix flash event not firing when response contains errors

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

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
       </a>
+      <a
+        href="#"
+        onClick={(e) => {
+          e.preventDefault()
+          visitWithErrorsAndFlash()
+        }}
+        className="with-errors-and-flash"
+      >
+        Visit with errors and flash
+      </a>
       <a
         href="#"
         onClick={(e) => {

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 @@
   <span id="flash">{JSON.stringify(page.flash)}</span>
 
   <a href={'#'} onclick={visitWithFlash} class="with-flash">Visit with flash</a>
+  <a href={'#'} onclick={visitWithErrorsAndFlash} class="with-errors-and-flash">Visit with errors and flash</a>
   <a href={'#'} onclick={visitWithoutFlash} class="without-flash">Visit without flash</a>
   <a href={'#'} onclick={navigateAway} class="navigate-away">Navigate away</a>
 </div>

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 = () => {
     <span id="flash">{{ JSON.stringify(page.flash) }}</span>
 
     <a href="#" @click.prevent="visitWithFlash" class="with-flash">Visit with flash</a>
+    <a href="#" @click.prevent="visitWithErrorsAndFlash" class="with-errors-and-flash">Visit with errors and flash</a>
     <a href="#" @click.prevent="visitWithoutFlash" class="without-flash">Visit without flash</a>
     <a href="#" @click.prevent="navigateAway" class="navigate-away">Navigate away</a>
   </div>

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',

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