Describe the solution you'd like

We should add a browser confirmation modal to prevent accidental data loss when the user navigates to a different page while filling out the product form. For example, if I add images, but don't save the product as a draft, I should see the modal when I try to go to a different page or close the tab.

Acceptance criteria

  • [ ] The user sees a modal a confirmation modal when they try to leave the editor or close the tab without saving changes.
  • [ ] The behavior is consistent with the Gutenberg editor.

Describe alternatives you've considered

No response

Additional context


The behavior is consistent with the Gutenberg editor.

@mattsherman @octaedro do you know about this? Where I can find it? How to see it?


Where I can find it? How to see it?

  • On your test site, navigate to Posts > Add New
  • Enter any text. For example, the title and some body content
  • Don't save the draft
  • Close the tab or click any menu item to navigate away from the page

Here's the video from my test site.


@jarekmorawski Awesome!!! Thanks


We have another one in the OBW

Screen Shot 2022-10-25 at 13 56 14

@jarekmorawski The idea here is to use the one you mentioned, right?


Interesting! I was thinking about the default one, but since we've already used a custom modal in, it'd make sense to use it here too. 👍

I'd only change the copy to something more relevant.

Save changes? This product has unsaved changes. If you go to a different page, they'll be lost. Do you want to save the changes before you go? [ Discard ] [ Save ]


I was considering to add the custom modal but I was not able to find a performant way of do it. After some researches I found the right way of do this is by using the window beforeunload event which is described here. Unfortunately, this way is not flexible at all so the only thing we can do is change the confirmation dialog message. Also I took my time to check how the wizzard implementation was made and it doesn't fit the AC described in this issue because they open the modal only when the user click on a different step which is totaly different to what we have here.

According to the prev and unless anyone else in the team has a better solution for this I purpose the following:

  • Implement this issue as it was described initialy. Not using a custom modal as a confirmation dialog.
  • Have a team discussion to see if there is another way of implementing this considering performance and a custom modal.

cc: @jarekmorawski @pmcpinto


@mdperez86 let's keep it simple and implement it as it was described initially. Thanks

© 2022 - All rights reserved.