How can I override the OnBeforeUnload dialog and replace it with my own?

When any user open a certain page, a request is made to change some status in a database, and I want to revert this status if the user closes the page without using the "save" button.

To that end, I declared a "window.addEventListener(‘beforeunload’, functionName)" in the page’s code within an useEffect. If I declare "event.preventDefault()" in said eventListener, a prompt is issued asking the user if they really want to close the page.

I want to execute a function only if and after the user press the "Exit" button in the prompt, but, currently, it is executed rigth after the prompt is issued, it doesn’t await the user’s response.

By the other hand, if I remove the "preventDefault", the prompt won’t appear anymore and the function will execute at the same time the page is closed, but it only works if the user already interacted with the page contents, if they just open the page and close it, without interactions, the function is not executed, and I desired it to be.

For that end, I wanted to replace the exit intent prompt with a modal of my own, in a way I can add onClick events to the modal buttons and then proceed to close the page, there’s any way to do that or the "execute function only if the user interacted with the page" approach is the only way?

Currently, my code looks like this:

useEffect(() => {
  const handleBeforeUnload = async (event) => {
   event.preventDefault();
     try {
       await requestChangeStatus(+route.query.dataI, +route.query.dataII)
     } catch (error) {
       await errorLog(error);
     }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

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

You need to sign in to view this answers

Related Post