Leaving page warning when saving node (Can not save)

I'm having trouble trying to replicate this. Can you give me details about the content type? What fields (type) does it have?

I can confirm this bug is a real thing. If you make changes to a page that you have created, each time I attempt to make a save, I see this:

I am doing this on a test install of 8.7.4 and all I have done is install the module and try it out.

Very promising.

To clarify, I created a basic page with a single text area field. Saved the page with some ipsum text and a title.

I then went back to edit the page and all I did was click Save and the dialogue box appeared saying that I had changes left and did I really want to leave.

I just took a peek at the console.

No field is set to be required (noted the bug on this already).

Ah, I now understand what this issue is about. A similar issue was set as a duplicate: https://www.drupal.org/project/gutenberg/issues/3066945

I confirm this is a valid issue. And we must fix it. The temporary workaround is very basic though: Simply click "Leave" page, and the node will save. But this is still a serious UX issue that we'll need to solve soon.

I updated the description a bit now. I'm still a bit unsure about this part:

The page hungs, a throbber appears at the bottom

I'm also getting some strange behaviors after clicking cancel after clicking "Save" - but then again. The dialogue should never have been there in the first place.

If I navigate to another page without saving, get the dialogue warning, and cancelling that lets me continue editing without any trouble.

It is possible to temporarily work around this issue by editing:
vendor/gutenberg/editor/index.js

It is a minified file, but the change is easy: search for warnIfUnsavedChanges and replace this.warnIfUnsavedChanges with null in the addEventListener part of the line.

Should look like:
window.addEventListener("beforeunload",null)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("beforeunload",this.warnIfUnsavedChanges)}}

when done. (all you are doing is replacing this.warnIfUnsavedChanges with null in the minified file).

This is not a good long term fix though. The problem occurs because when you "touch" the edit area, wordpress/gutenberg internal structures set the isDirty flag. and Even savePost which I can see is dispatched via the drupal behavior in this module does not clear this flag. It seems as though WP prevents all event bubbling when you hit save.. which is maybe not a good idea with Drupal's event attachment system...

Again, this is not good because of the whole Drupal/ES6 thing. However, it is much less fun to set up a dev environment, pull in gutenberg from WP github, built it, pull in node/composer dependencies, and then build the package.

It seems like the "best" thing to do might be to umount the editor react component entirely, which will naturally unset all the event listeners and tear everything down, including the isDirty event listener. Once you have retrieved the edited post content via the Drupal behavior, of course, but this was not working for us for some reason. That should avoid the need to change the upstream gutenberg project at all?

The issue was, when submitting, we need to clear the post "dirty" state by calling savePost(). But this function is async (recent change), so the submit would leave the page before clearing the state.

Btw, also fixed the REQUEST_META_BOX_UPDATES exception ;)

#godlike

Great work!
You're also clearing your own personal isDirty flag with that commit, Marco!

- I probably got my own though, adding this joke to the issue... :P