inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.5k stars 436 forks source link

VisitOptions missing from global event detail object #2015

Open wijzijnweb opened 3 weeks ago

wijzijnweb commented 3 weeks ago

Version:

Describe the problem:

When having a global event the VisitOptions are not passed to the event object. document.addEventListener('inertia:before', checkForUnsavedChanges)

function checkForUnsavedChanges(event) {
    // event misses the VisitOptions
}

So we capture the visit event. Check if there are unsaved changes. If the user wants to move away anyway I want to redo the visit call.

router.visit(currentEvent.value.detail.visit.url, currentEvent.value.detail.visit)

But of course when the user confirms we remove the event listener so it doesn't trigger the modal again. We don't use js confirm because the requirement is that there are multiple options. Cancel, move away, or save. These are shown in a modal. Besides that confirm is quite ugly.

If orignal event callbacks can be added to the event details that would be great!

pedroborges commented 3 weeks ago

@wijzijnweb the visit object should be available at currentEvent.detail.visit. In your example above there's an extra .value that shouldn't be there. Please double check your code and if the issue persists, please provide a reproducible repo that we can debug on our end.

Screen Shot 2024-10-11 at 11 14 22

By the way, you may not need to redo a visit since you have the option to only cancel the visit in progress if doesn't pass a check by calling currentEvent.preventDefault() from your inertia:before event listener.