I am working on a dynamic form where the form gets submitted automatically when all the required fields are filled. We don't have any submit button in the form. Now suppose a user has filled a few of the form fields and tries to leave the form by clicking any navigation link in the application, we need to warn the user with a pop up showing the message "You have unsaved changes. Navigating away from this view will revert these changes. This action cannot be undone. Are you sure you want to continue?". Now if the user clicks on the continue it will redirect to the navigated page and if he clicks on cancle it will stay on the same page(form).
Here we are using ReactJS but not using any react routing in the application. We have tried all possible ways but were not able to come up with any solution. Has somebody faced this scenario before or has any idea how to approach the problem?
You could use native browser API beforeUnload.
...
const beforeunload = (e) => {
// You can add logic for confirmation here.
if (dataUnsaved) {
e.preventDefault();
e.returnValue = true;
}
}
useEffect(() => {
window.addEventListener('beforeunload', beforeunload);
return () => {
window.removeEventListener('beforeunload', beforeunload);
}
}, [])
return (
...
)
...