Flash message is being triggered for partial reloads

[dberger-rb]

Version:

• @inertiajs/vue3 version: 1.0.9

Describe the problem:

The same problem as #1184 but that issue is closed without a fix. If I receive the notification after submitting the form and I go to another page and back in the browser with my mouse or back button then I get the same notification from the submit.

Steps to reproduce:

vue3-inertiajs.mp4

[reinink]

Hey! So this is actually expected behavior. As much as possible Inertia.js tries to replicate default browser behavior, and in a standard server-side rendered full page refresh application if you go back in history you'll also see this kind of behavior, since that was the state of the page when you left it.

Hope that makes sense! 👍

[BillyBouman-2B-IT]

Hey! So this is actually expected behavior. As much as possible Inertia.js tries to replicate default browser behavior, and in a standard server-side rendered full page refresh application if you go back in history you'll also see this kind of behavior, since that was the state of the page when you left it.

Hope that makes sense! 👍

@reinink Yes, from the technological perspective it makes a lot of sense. For the end-user however it can be rather confusing if a "succesfully deleted" or "succesfully saved" notification comes up when navigation back in history. Do you have any guidance or instructions on how to prevent or modify this behavior? In #1184 there were more with this question.

Thanks in advance and we're glad to see you active on the project again.

[Bosphoramus]

@reinink this also happens when doing partials reloads, not only when using the browser back button, its a bit weird, because you may have closed the success, or error notice, and then when doing a unrelated action that causes a partial reload, the notice that you manually closed appears again

[daniel-wright]

I had the same concern. I would flash a popup message that the user can close, and it was confusing when navigating history back to the page and it flashes again. I solved this by only triggering the flashed message to show by using the router success event, which only triggers on page visits, not history visits.

Basically something like this:

const page = usePage();

let showFlashMessage = ref(false)

router.on('success', (event) => {
  if (page.props.flash !== null) {
    showFlashMessage.value = true
  }
})

[BillyBouman-2B-IT]

Thanks @daniel-wright! I've implemented the fix for PingCRM for the sake of completeness. See inertiajs/pingcrm#205. This actually solved a bug that's been around for too long in my own project. Very clever solution.

[dairidong]

Can’t understand why close this issue.