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.