Editor: prompts to restore/discard changes when there are no changes

[ryanboren]

1. Starting at URL: https://wordpress.com/post/
2. Publish a post
3. Click <- Back
4. Notice dialog that says “You have unsaved changes. Are you sure you want to leave this page?”

Often (but not always), immediately after publishing or updating, I see this AYS (are you sure) dialog when I attempt to navigate away from the editor via the <- Back button. Having to dismiss an unnecessary dialog is annoying, but the much bigger problem is that I can’t trust an editor that makes the save state of my content so ambiguous. One of my editor prime directives is, “Don’t AYS for unsaved changes if there aren’t unsaved changes.”

This ambiguity follows when you edit an existing post. I haven’t visited the post below in 3 years. When I open it, I get a restore unsaved changes prompt. This happens for lots of my old posts.

What am I restoring? I just want to peek the post right now, not edit it, so I click “Don’t restore”. I’ll postpone dealing with it until next time I venture to this post. After reading, I click the editor’s back button to return to my posts search and receive an unsaved changes AYS (Are You Sure). That’s an interruption on the way into the post and one on the way out. Unless I restore unseen changes, I will be twice interrupted on every visit.

Untrustable editor AYS comes up in user testing, it comes up in internal testing, yet its misbehavior endures. Here’s an anecdote from a recent user testing session.

To save or not to save: in the customizer and editor, both Lori and Mike got alerts indicating they shouldn’t leave the page they were on. This seemed surprising and confusing. In the editor, it would sometimes happen just after updating. In Customizer, the adaptive site preview gives the facade that it’s been updated, and the Save/Publish button was overlooked. Lori and Mike didn’t think their sites were “live” – neither noted the “Save & Publish” button (they didn’t see it), but I wonder what that might have told them about their site.

Related issues:

• Editor: Triggering the unsaved changes AYS dialog in the editor loses <- Back button history · Issue #4509 · Automattic/wp-calypso
• Editor: "Restore post" modal appears briefly then disappears · Issue #4795 · Automattic/wp-calypso
• Editor: allow user to preview autosave changes before deciding to restore · Issue #1610 · Automattic/wp-calypso
• Untrustable editor restore prompt
• https://test.wordpress.com/tag/ays/

Included screenshots are Macnchrome, latest of each.

[ryanboren]

https://test.wordpress.com/2016/12/05/editor-prompts-to-restorediscard-changes-when-there-are-no-changes/

[timmyc]

Hey @ryanboren thanks for reporting this. I'm trying to recreate the issue using steps 1-4 up top and can't seem to trigger it. To clarify, the <- Back button, is that the browser back button or the <- Back in the sidebar?

The flow I'm doing is, visiting /post, select a site from the site selector, add title, add content, and publish. I haven't gotten the warning when clicking the browser back or the sidebar back button. I also tried waiting for an initial auto-save to kick in and complete before publishing.

[timmyc]

Okay did some digging on the "Saved Draft" dialog as well. This dialog will be shown if a post has any autosave meta data present. I spent some time to confirm that both the Calypso Editor, and wp-admin both will trigger auto-saves on published posts, and as such, any subsequent API requests to that post's endpoint will return autosave data.

Both wp-admin, and calypso are quite generous in making these autosaves as well, so even if you have a post open in either, errantly hit the space bar while focused in the editor, an autosave point will be created. Funny how these autosaves are here to create trust in the editor, but can cause confusion as well.

That being said, this dialog is persistent. So even if you click "Don't Restore" - the next time you open the same post in the calypso editor, the dialog is shown. The only way to clear out the autosave meta is to perform an update on the post. I'm not sure if "Don't Restore" should clear out the autosave meta, but perhaps a third action should be available here for "Delete Auto Save"?

[apeatling]

@ryanboren Any further thoughts here based on @timmyc's questions?

[ryanboren]

I don't think I'm errantly hitting keys--certainly not every time this happens, which is almost daily.

For my flow, deleting when I say "Don't Restore" is okay-ish. I can't speak for other flows though. This is un-transparently destructive. Until we have transparency, perhaps "Delete Auto Save" (or "Discard revision"), but then I'll be wondering what the difference between "Don't Restore" and discard is and why both are present. If we had transparency, I think "Don't restore" could be simply "Discard".

Interim transparency could be showing the time the unseen revision was made. If it's seconds after the last update, I can be pretty sure I want to discard it. But, I pretty much always want to discard because I know the AYS is always wrong.

[alisterscott]

I've worked out one way to consistently reproduce this after whittling down html tags to which ones trigger this.

Reproducible Steps

1. Create a new post with the following HTML content:

[code language="javascript" light="true"]return this.driver.isElementPresent( this.quoteSelector );[/code]

e

[code language="javascript" light="true"]return this.driver.findElements( this.quoteSelector ).then( e => !!e.length );[/code]

2. Switch to visual editor and publish that post
3. Navigate away from the editor to the /posts list and click "edit" on that post
4. The post should load in the visual editor
5. Switch to the HTML editor, make no changes, switch back to the visual editor
6. Attempt to navigate away

The unsaved changes prompt is displayed even though no changes were made, we only switched between the editors.

[timmyc]

Interesting @alisterscott - I can reproduce, and it actually triggered the message for me after the initial save too. It appears that it will happen with any shortcode, as I was able to trigger the warning by doing the same flow as above, but on a post with a gallery shortcode.

Moving from Visual -> HTML with a gallery will throw the warning also. /cc @aduth any thoughts on why toggling between Visual and HTML with a shortcode would flag the post as dirty?

[alisterscott]

@timmyc: Another strange thing I saw with this, but I can't reproduce it so I'm hesitant to raise it, but when publishing a post with similar content, sometimes it shows the message "Post Updated" before immediately showing the "Post Published" success message. Could this be related?

[alisterscott]

I was able to trigger the warning by doing the same flow as above, but on a post with a gallery shortcode.

I know that @ryanboren does a lot of galleries so this may be why this was happening for him. Ryan: do you switch between visual and html tabs when editing?

[alisterscott]

The "update" button always shows as enabled even without making changes now, is this part of the new editor design or was it always like that?

[aduth]

There's some duplication between this issue and #6869

/cc @aduth any thoughts on why toggling between Visual and HTML with a shortcode would flag the post as dirty?

When last this was debugged with a fix explored in #6880, I don't recall it being specific to shortcodes specifically, but more around wpautop and how transitioning from HTML to Visual sets the "raw" content without <p> tags which when later compared with HTML from TinyMCE is not strictly strictly equal to each other (latest relevant comment).

[Lochlaer]

Howdy! A user came into chat today to report that she's seeing the same issue. She's on Chrome desktop, and clearing her cache and emptying her cookies doesn't resolve the issue.

She said that when she edits a page, then clicks UPDATE, she gets the message that the page updated successfully. But when she tries to exit out of the page, she gets the alert that there are unsaved changes on her site. She exits the page, and when she returns, she gets the other message letting her know that "there is a more recent version of the page, do you want to restore it?" Understandably, she's upset and concerned that she might lost her changes or content and doesn't understand why she keeps getting these alerts. She returned to chat later in the day to ask about the issue again.

Ticket: #3151780-t

[Lochlaer]

Another user came into chat today with the same issue: they keep getting the message saying that they had "unsaved changes" as they tried to navigate away from a page, even though they'd already clicked the UPDATE button to save their changes before getting that message. They said that when they navigate away, sometimes the page changes are saved, and sometimes they're not. They're really wanting some reassurance that when they save their updates, they'll actually be saved.

I asked them a few more questions to try and see if there was some kind of unique behavior that might pinpoint the cause. User is on a PC, Chrome browser. They said this at one point:

I do notice as I move between pages when I am creating/editing that multiple tabs open up at the top of my page and it gets crowded

I tried to get clarification as to what they meant by that. Are they opening up multiple pages in different tabs to edit them, and then toggling back and forth between them? They followed with:

Happened again. Steps I did. On a page, selected to publish, then choose page attributes to not be a TOP page, updated. I notice the saving changes message came up and went. Tried to move back a page and then warning about unsaved changes came up.

We ended up getting disconnected in chat, so I couldn't follow up with more clarifying questions. I sent the user a ticket so see if they had more insights they could share, so I'll update this if I hear from them again.

Ticket: #3238963-t

[nickmomrik]

This still happens to me almost daily in Chrome and the Mac desktop app. I click Save/Update on a post, wait for it to complete, and immediately try to close the tab or navigate away from the post. I have not touched the keyboard or clicked anywhere else and the AYS will come up.

There are even times where I keep clicking Save, wait, and try to leave, but the AYS will keep coming up again and again. Usually I just give up and leave hoping I don't lose something. :-(

[jsnmoon]

A user reported the same issue using Firefox 53.0 in Windows. From investigating the revision history, it looks like this occurred when proc'ing an autosave call. The latest revision was created by an autosave and has is identical to the current revision.

Ticket: #3266324-t

[ryanboren]

I'll add my testimony. I also experience this almost daily. Being unreliable and misleading about content state destroys trust and creates anxiety. This is an impactful bug that has been around for over a year, possibly back to the beginning. It interrupts publish and edit flow (the heart of this software) with an AYS, an AYS! That is an interruption that smashes cognitive stacks with a forced decision while burning a click/tap. We're interrupting two of the most critical and anxious moments in this software (the moments after publish/update) to deliver false state information and force a decision based on that false state. IMO, this is a high priority flow and trust killer.

[nickmomrik]

With the new preview after publish in 2.7.0-beta1, the AYS is coming up when I try to navigate from the Preview to My Sites.

[iandunn]

I've been trying to reproduce this, but haven't been able to. The only bug I can get to happen is the one that's triggered by switching between the Visual and HTML tabs, but that seems like a separate issue (#6869).

@ryanboren, @nickmomrik: Do you have any insights that might help reproduce it reliably? Would you mind writing out the explicit steps again (since Calypso has changed a lot since the original report)? I think it'd also be helpful to have a handful of URLs for posts that you see this happening on.

[nickmomrik]

Do you have any insights that might help reproduce it reliably?

Unfortunately there is nothing reliable about it. :-/ Sometimes it happens and sometimes it does not. There is nothing different I'm doing between the cases, because I've resorted to doing absolutely nothing else on my computer while waiting after the save/update/publish click to make sure I'm not triggering anything.

Could we add a setting to turn on some debugging that alerts us about what it thinks has changed since we hit save/update/publish?

[nickmomrik]

It was enabled for both sites I publish to. I don't use it though, so I've turned it off and will see if I notice a difference.

[alisterscott]

#6869 shows how it's easy to make the editor state dirty merely switching between Visual and HTML modes using shortcodes like gallery without making changes so I think that may influence some of these reports, particularly for advanced customers using HTML mode:

[cecilearkay]

I had two more reports this week in on the French forums:

• https://fr.forums.wordpress.com/topic/fenetre-qui-souvre-qui-me-demande-si-je-veux-le-quitter-le-site/ (Windows + Chrome)
• https://fr.forums.wordpress.com/topic/pourquoi-ai-je-ce-message-apres-une-mise-a-jour/ (Windows + Chrome)

Had them both try other browsers/computers/internet connection, but the issue is still here.

[julsyd]

Another user report of this in 1277576-zen. This is happening on all of their posts, even immediately after updating/publishing.

[eoinsav]

Another report in #1278537-zen. They say it has been happening for the last few weeks.

[ehti]

Re-posting the report by @slicesofamerica which had int links:

I have a case to report of this issue from ZD ticket 1276973.
#1276973-zd
#4978069-hc

User is getting the warning, "You have unsaved changes. Are you sure you want to leave this page?" every time they save. They cleared the browser cache and it should be noted that another user on the same site, different computer, is getting the same error.

[Janna-Pieler]

Two more reports:

#5045852-hc - User keywordsdc
#5047354-hc - User margohal

This happened in Chrome, Firefox, and Safari when in Calypso. I replicated it myself. It doesn't happen in WP-Admin.

[jblz]

OK, I think I've got a bead on at least one of the major causes of this as per recent reports...

Spacing in inline styles is prone to keeping the editor marked as "dirty."

Here's a simple way to reproduce:

• Create a new post (or page, etc. -- it happens there as well)
• Switch to HTML mode
• Paste: <p style="padding-left: 30px;">hi</p> (note the space between the : & the 30px)
• Publish the post
• Attempt to navigate away

I'm seeing the prompt 100% of the time for this case.

I tried manually calling wp_insert_post on WPCOM and the space in the inline styling is getting stripped there.

When Calypso attempts to resolve the post_content from the response with that in the state.posts.edits value it decides the buffer is "dirty" and keeps the edit in state.

---

As @alisterscott pointed out with regards to shortcodes, switching to the visual editor is one way this can be elicited.

I suspect that something changed in the visual editor that, while not the cause of these symptoms, has exacerbated it by putting these sorts of whitespace in the content.

...continuing to dig.

[jsnajdr]

Keeping the "dirty" flag correct has been a topic of many subtle bugs for a very long time, but the latest issues were caused by the Reduxification work. The algorithm for the following flow has changed:

1. User changes a post, clicks "Save".
2. While save is in progress, the user continues typing and making changes
3. Save finished, the REST response has the "canonical" saved post object
4. Somehow we need to "rebase" the unsaved changes onto the saved ones, removing saved edits and keeping the unsaved.

The old Flux algorithm stored the edits-while-saving into a queue and applied them to the post returned from server after save finished. Similar to "git rebase"

The new Redux algorithm is different: it continues to apply the edits to the "current" post, and when save REST response arrives, tries to merge the two versions of the post by comparing attributes. Similar to "git merge"

This works well for all attributes except content: there are filters and normalizations being applied on the server that make the content returned in REST response different from what was sent in the request body. That defeats the "dirty" check and there is no way to distinguish the "important" edits from "unimportant" ones.

I'll work on a PR that improves the Redux algorithm when saving content.

[clubkert]

Another case to report: 3858433-hc

User said it's been happening "over the past couple of days" after publishing a post. Using chrome.

[erricgunawan]

User #1276973-zen back with this additional info:

Yes, both my co-administrator and I are working on PCs running Windows, not Macs.

[ahmadbaig1]

Another user facing this issue- 1286248-zen

The User facing an issue while writing posts. When they edit the post, click Save to save the changes, then hitting the Close button gives them the 'AYS' warning.
This is mostly happening with the post- Portugal Part 1.
I tested it by impersonating them and can confirm that it is happening.

[jsnajdr]

I researched the "space-in-style-attr" bug reported by @jblz in #9833 (comment) and it's interesting that it happens only on Simple WP.com sites. Jetpack and Atomic sites keep the whitespace as-is, don't clean up the content and don't trigger the AYS bug. Apparently the server-side filters for content (there are several) are different for each site.

I'm working on this today.

[KruttikaPhalke]

One more user is facing this issue- 1290581-zen

The user is getting the warning, "You have unsaved changes. Are you sure you want to leave this page?" every time they save.
They say it has been happening after adding categories to the post.
I tested it by impersonating them and can confirm that it is happening.

[ahmadbaig1]

Another user is facing the same issue here - 1293710-zen

User is having an issue with the page "Queenies Closet" while saving it, seems to trigger the AYS dialogue box. Asking to save again even though they have just saved it.

[nickmomrik]

After making the Markdown changes, it's still happening for me.

[alisterscott]

Please test some of the fixes in #26247 by @jsnajdr 🙏

[jsnajdr]

After making the Markdown changes, it's still happening for me.

@nickmomrik I couldn't reproduce the bug when editing a post with Markdown enabled. (I enabled it in wp-admin in the Settings -> Writing section on a Simple site, maybe there is some different "Markdown support" I'm not aware of).

It would help me a lot to have reliable steps to reproduce, and a GIF video always helps, too 😉 Also, it matters a lot whether the site is Simple, Atomic or Jetpack one -- each type has slightly different plugins and that influences how posts are transformed on save.

[nickmomrik]

I disabled Markdown as a test (and since I don't use it) based on #9833 (comment)

I've been experiencing these AYS issues with 2 WordPress.com sites. It would be great if there were reliable steps to reproduce this, but I've never been able to notice a pattern.

[separatelyunited]

For this user in #1276973-zen back the site is a simple site and the problem is happening for multiple admins. They say the problem is sporadic and does not seem to have any pattern. It is not specific to one page. They also said they as far as they can see even though they get the message that changes were not saved, they have not actually lost the changes they made.

I am asking them to try making some edits and letting us know if they get the error. I have not been able to produce it on my end.

[alisterscott]

Considering the frequency of the previous user reports of this bug, and that we haven't seen a user report on this for 21 days since @jsnajdr's changes, I believe we can be confident that those changes have addressed this long-standing 🐛

🎉 and 🙏 @jsnajdr

[nickmomrik]

Still happens to me almost every day.

[jsnajdr]

Still happens to me almost every day.

Hi @nickmomrik, if you have reliable steps to reproduce (having these makes all the difference between fixing and not fixing a bug), please file a brand new issue. This one already became a confusing mix of many different bugs that are not always related to each other.

[nickmomrik]

Unfortunately there has never been a reliable set of steps.

[dllh]

I've got a customer still reporting this too, though I also don't have reliable repro steps.

[zaantar]

There's a very slight chance that this will help anyone, but I've encountered the same problem in the classical editor of WordPress while using the submitanyway library.

The code that was triggering it was as simple as:

$(selector).submit(function(ev) {
    ev.preventDefault();
    this.submit();
}