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.
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?
Posts > Add New
Here's the video from my test site.
We have another one in the OBW
@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 https://github.com/woocommerce/woocommerce/pull/34948, 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:
cc: @jarekmorawski @pmcpinto