9

I'm trying to close the browser after I have reached a order confirmation page and it throws a alert as shown below. This creates a misconception to user that his changes are unsaved. So I want to avoid this pop up.

enter image description here

I know this alert is triggered because of beforeunload event. Solution that I have tried:

window.addEventListener("beforeunload",(event)=>{
    return null;
})

and

 window.onbeforeunload=null;

I'm not using jQuery in my application. Is there any other way that I can disable this event from firing.

Links that I have tried:

How to disable/override "Do you want to leave this site?" alert?

Disable "Changes you made may not be saved" pop-up window

How to disable "Changes you made may not be saved." dialog box (Chrome)?

None of them are working for me.

How can I achieve this without jQuery?. What I'm confused about is how to handle this event so that it doesn't show the pop up.

I'm using Chrome Version 101.0.4951.64

Pyarel
  • 139
  • 1
  • 1
  • 7
  • It's possible the message appears because you has an "guard" [CanDeactivate](https://angular.io/guide/router-tutorial-toh#candeactivate-handling-unsaved-changes), not because you has a window.addEventListener("beforeunload"). Check your Routes and check if you subscribe to "beforeunload" in any place of your site – Eliseo May 13 '22 at 06:47
  • Search your project for `window.alert` messages. Then update the post of the related code that you think might cause this. – Joosep Parts May 13 '22 at 07:29
  • Yes, I'm using a angular component library( Terafina tessellate). Even if I specify event.stopImmediatePropagation() I'm getting this alert. So this event is raised by the library. Is that the problem here?. I have figure out how library is raising this event. – Pyarel May 16 '22 at 06:43

2 Answers2

12

This could be due to some third-party library or other functionality in your code that listens for the "beforeunload" event and perhaps modifies the value of event.returnValue.

This workaround may work for you.

window.addEventListener('beforeunload', function (event) {
  event.stopImmediatePropagation();
});

This will prevent the execution of the other listeners in the chain.

It is important to include this code at the top of the app to ensure that your function is executed first.

In the case of Angular, a good place can be in the ngOnInit of the AppComponent.

Check here.

cybering
  • 778
  • 7
  • 19
  • This works in the stackblitz. I feel like this should be the solution. But for some reason even after using it in the ngOnIt of root component, I'm still getting the alert. – Pyarel May 16 '22 at 06:34
  • I think that an ugly workaround could be add a script that only do that on the top of index.html, maybe this solve the problem. – cybering May 16 '22 at 08:46
  • Thank you so much for your help. What worked for me was adding the same thing in app component with an additional return statement which returns undefined. – Pyarel May 17 '22 at 09:33
-1

Just adding a MDN documentation of beforeunload event for reference.

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

When this event returns (or sets the returnValue property to) a value other than null or undefined, the user will be prompted to confirm the page unload.

Internet Explorer does not respect the null return value and will display this to users as "null" text. You have to use undefined to skip the prompt.

Pyarel
  • 139
  • 1
  • 1
  • 7