How to disable "Leave site?. Changes you made may not be saved" pop up in angular?

Question

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.

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

Answer 1

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.

Answer 2

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.