Show an Unsaved Changes Warning Dialog on Navigation
Answered
Giant Angora posted this in #help-forum
Giant AngoraOP
Hello there!
Let’s say a user is on the /products/add page, has filled out a form, and then tries to navigate away. For example:
- Using the browser’s back button,
- Clicking on any link, or
- Closing the page.
- I want to display a confirmation dialog (e.g., "You have unsaved changes. Are you sure you want to leave?") to warn the user about their unsaved changes.
How can I achieve this?
Let’s say a user is on the /products/add page, has filled out a form, and then tries to navigate away. For example:
- Using the browser’s back button,
- Clicking on any link, or
- Closing the page.
- I want to display a confirmation dialog (e.g., "You have unsaved changes. Are you sure you want to leave?") to warn the user about their unsaved changes.
How can I achieve this?
Answered by B33fb0n3
you can use for example this event: [beforeunload](https://developer.mozilla.org/de/docs/Web/API/Window/beforeunload_event)
That works mostly fine, but for some actions it does not work.
There are some other events that you can also use to archive exactly what you want like, pagehide, unload, ... you can see a good overview here: https://developer.chrome.com/docs/web-platform/page-lifecycle-api/image/page-lifecycle-api-state.svg
That works mostly fine, but for some actions it does not work.
There are some other events that you can also use to archive exactly what you want like, pagehide, unload, ... you can see a good overview here: https://developer.chrome.com/docs/web-platform/page-lifecycle-api/image/page-lifecycle-api-state.svg
30 Replies
@Giant Angora Hello there!
Let’s say a user is on the /products/add page, has filled out a form, and then tries to navigate away. For example:
- Using the browser’s back button,
- Clicking on any link, or
- Closing the page.
- I want to display a confirmation dialog (e.g., "You have unsaved changes. Are you sure you want to leave?") to warn the user about their unsaved changes.
**How can I achieve this?**
you can use for example this event: [beforeunload](https://developer.mozilla.org/de/docs/Web/API/Window/beforeunload_event)
That works mostly fine, but for some actions it does not work.
There are some other events that you can also use to archive exactly what you want like, pagehide, unload, ... you can see a good overview here: https://developer.chrome.com/docs/web-platform/page-lifecycle-api/image/page-lifecycle-api-state.svg
That works mostly fine, but for some actions it does not work.
There are some other events that you can also use to archive exactly what you want like, pagehide, unload, ... you can see a good overview here: https://developer.chrome.com/docs/web-platform/page-lifecycle-api/image/page-lifecycle-api-state.svg
Answer
@Giant Angora solved?
@B33fb0n3 <@1167415269375873044> solved?
Giant AngoraOP
my pc is at shop for repair
i will try same once i get pc back
@Giant Angora i will try same once i get pc back
when will that be?
Giant AngoraOP
1st February
@Giant Angora tried?
@B33fb0n3 <@1167415269375873044> tried?
Giant AngoraOP
yes... I will update you around 10 pm
I want to make utility function
I want to make utility function
Giant AngoraOP
@B33fb0n3 hi
i dont want to use
beforeunload as it shows broswer default alert, i googled a lot but could not see anywhere to remove default alertonly i need to implement page refresh and close
Giant AngoraOP
Any recommendations...?
@Giant Angora i dont want to use `beforeunload` as it shows broswer default alert, i googled a lot but could not see anywhere to remove default alert
as you using a browser button, you need to use the browser notification
Original message was deleted
Write a good message that the user understands that will be inside the confirm prompt
@Giant Angora solved?
Giant AngoraOP
hi @B33fb0n3 have some bugs, still working on it
@B33fb0n3 you can use for example this event: [beforeunload](https://developer.mozilla.org/de/docs/Web/API/Window/beforeunload_event)
That works mostly fine, but for some actions it does not work.
There are some other events that you can also use to archive exactly what you want like, pagehide, unload, ... you can see a good overview here: https://developer.chrome.com/docs/web-platform/page-lifecycle-api/image/page-lifecycle-api-state.svg
Giant AngoraOP
this
beforeunload does not get fit in my case, i dont want browser default prompt when user reload page while filling form@Giant Angora this `beforeunload` does not get fit in my case, i dont want browser default prompt when user reload page while filling form
what else do you want to do, to prevent the browser from unloading your content?
Giant AngoraOP
i want to show my cutom dialog
i can show custom but how can i prevent default one
exactly! Of course you can show your beautiful dialog or the words best page, but the user already clicked the button. If it's your own navigation: ok, then you can control the navigation. But if it's the browser back button or reload button or whatever, the browser controls it and not your page. So you need to handle the specific event. My suggestion is to handle the
beforeunload eventRose-breasted Grosbeak
Not next js, but it explains well
https://tanstack.com/router/v1/docs/framework/react/guide/navigation-blocking
https://tanstack.com/router/v1/docs/framework/react/guide/navigation-blocking
@B33fb0n3 you can use for example this event: [beforeunload](https://developer.mozilla.org/de/docs/Web/API/Window/beforeunload_event)
That works mostly fine, but for some actions it does not work.
There are some other events that you can also use to archive exactly what you want like, pagehide, unload, ... you can see a good overview here: https://developer.chrome.com/docs/web-platform/page-lifecycle-api/image/page-lifecycle-api-state.svg
Rose-breasted Grosbeak
That's an informative chart.
Though in the docs page where this image is shown, it says not to use
In that regard, the only reliable event is visibilityChange. And even that wouldn't work on mobile browsers
Though in the docs page where this image is shown, it says not to use
unload event 😆In that regard, the only reliable event is visibilityChange. And even that wouldn't work on mobile browsers
@Rose-breasted Grosbeak That's an informative chart.
Though in the docs page where this image is shown, it says not to use `unload` event 😆
In that regard, the only reliable event is visibilityChange. And even that wouldn't work on mobile browsers
yea, I think it's better that OP understands what he manipulates instead of just saying "use this event". Like that OP will be able to solve future problems faster that very likely will come, when using these kind of events
@Rose-breasted Grosbeak Not next js, but it explains well
https://tanstack.com/router/v1/docs/framework/react/guide/navigation-blocking
Keep in mind, that tanstack router is currently not designed to work with fullstack frameworks
@B33fb0n3 Keep in mind, that tanstack router is currently not designed to work with fullstack frameworks
Rose-breasted Grosbeak
It's just a resource for navigation blocking
Giant AngoraOP
@B33fb0n3 okay... so you mean i cannot prevent default prompt that browser shows on beforeunload event bcoz browser controls it, and i cannot prevent browser controlled navigation
got it
@Giant Angora <@301376057326567425> okay... so you mean i cannot prevent default prompt that browser shows on beforeunload event bcoz browser controls it, and i cannot prevent browser controlled navigation
I am ready to learn, when you find an event, that can do that, ping me here