Description
Is your feature request related to a problem? Please describe.
In the SmartForm, we want to display a blocking popup "You have unsaved changes, are you sure you want to leave" on various events: closing the browser, changing route.
The problem is that "changing" route can happen at 2 levels:
- in the browser. Easy to handle
- in the SPA. That's where trouble begins.
The problem is that SPA route transition are handled by a router, which is framework specific. React Router was suffering from this limitation, and Next also suffers from it: you have to use a framework specific solution to block the route transitions.
Describe the solution you'd like
- A pattern to tell any SPA router that we want to block route transition FIRST DRAFT OK, it triggers an event. It's app/framework responsibility to listen for those block/unblock events and add relevant behaviour for their own JS router.
For instance in React Router, that means calling history.block(), in Next, adding a listener to "beforepopstate"
Demo of a generic hook: https://gist.github.com/eric-burel/75301e2ba01967e0ec909ddf7fae5100
Work ongoing there: #31
- A sample implemention with Next, in Vulcan Next TO BE DONE
Describe alternatives you've considered
It's possible to have Next specific solution but that creates a tight coupling which we refuse
Additional context
- How to intercept route changes: How to intercept route changes? vercel/next.js#12348
https://github.com/ReactTraining/history/blob/master/docs/blocking-transitions.md
Added beforeRouteChangeStart vercel/next.js#5377 - Offical doc for the relevant event in Next: https://nextjs.org/docs/api-reference/next/router#usage-3
- Next specific solution: Route cancellation vercel/next.js#2476 (comment)
Browser Back Button does not trigger window.onbeforeunload vercel/next.js#2694