onbeforeunload not working inside react component

Question

I have a simple react-component where a user can edit data. As the values that may be changed could take some time I want to ask the user to confirm when leaving the page in case of unsaved changes.

In the component's constructor I call:

window.addEventListener("beforeunload", this.handleWindowBeforeUnload);

I also tried

window.onbeforeunload = this.handleWindowBeforeUnload;

The handleWindowBeforeUnload looks like this:

private handleWindowBeforeUnload = (ev: BeforeUnloadEvent): string => {
    return "Unsaved changes. Are you sure?";
}

However, setting a breakpoint will hit. But nevertheless there is no prompt showing that leaving may be dangerous. Also tried with latest Firefox but nothing happened. As stated on MDN I also tried

// Cancel the event as stated by the standard.
e.preventDefault();

// Chrome requires returnValue to be set.
e.returnValue = '';

// return something to trigger a dialog
return null; // ''; // "Do something"

Still nothing happens. What am I doing wrong here?

This might be a no-brainer dummy question and I'm sorry to ask but just to be sure: did you set the returnValue/prevent default before the return line? (eg you don't early-return before it actually happens) — Rose Robertson
– Rose Robertson, Commented Sep 21, 2018 at 18:04
I tried returning null, '' as well as a string Do something at the very end of the function - Nothing happened. I know that custom strings or alerts will not be shown/are not supported. But at least the dialog (as written everywhere) would be great to see... — KingKerosin
– KingKerosin, Commented Sep 21, 2018 at 18:07
So I wonder if you bind on mount instead it will work. But as to why that would work when it doesn't in the constructor I'm not sure! — Rose Robertson
– Rose Robertson, Commented Sep 21, 2018 at 18:10

Bhojendra Rauniyar · Accepted Answer · 2018-09-21 18:10:10Z

11

You'll need to call the method inside the lifecycle methods:

componentDidMount() {
  window.addEventListener("beforeunload", this.handleWindowBeforeUnload);
}

componentWillUnmount() {
  window.removeEventListener("beforeunload", this.handleWindowBeforeUnload);
}

answered Sep 21, 2018 at 18:10

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KingKerosin Over a year ago

Indeed, this is working (when also using the Chrome-fix). Any idea why it's working only when bound in componendDidMount? At least when bound in constructor I got a hit on my breakpoints (which means something has been bound).

Bhojendra Rauniyar Over a year ago

In react, if you need to handle DOM events not already provided by React you have to add DOM listeners after the component is mounted

David Over a year ago

To implement these with hooks, see stackoverflow.com/questions/53464595/…

Vin Shahrdar Over a year ago

Question: Why do we have to remove it?

Tomoe Over a year ago

I am refacting a old react16 project, that's useful

Gibolt · Accepted Answer · 2022-10-18 19:54:35Z

7

Modern React Solution

useEffect(() => {
  const preventUnload = (event: BeforeUnloadEvent) => {
    // NOTE: This message isn't used in modern browsers, but is required
    const message = 'Sure you want to leave?';
    event.preventDefault();
    event.returnValue = message;
  };

  window.addEventListener('beforeunload', preventUnload);

  return () => {
    window.removeEventListener('beforeunload', preventUnload);
  };
}, []);

You may also need this depending on your lint config:

// eslint-disable-next-line no-param-reassign
event.returnValue = message;

answered Oct 18, 2022 at 19:54

Gibolt

47.9k15 gold badges208 silver badges133 bronze badges

1 Comment

skorenb May 12 at 13:42

setting returnValue isn't required and it's deprecated

Collectives™ on Stack Overflow

onbeforeunload not working inside react component

2 Answers 2

5 Comments

Modern React Solution

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Modern React Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related