Autosave causing the 'do you want to leave' nag on new posts

[ErisDS]

This has been reported as happening in Mac OS Chrome via twitter: https://twitter.com/webalys/status/529882514760818688

I have not been able to reproduce it, but my Mac is not yet on Yosemite. User has confirmed it's only happening on new posts.

It's not yet clear whether the alert is the browser one:

or our modal:

But I'd guess the browser one.

On a slight tangent, but possibly related if it is the browser one, I've seen reports of it firing when focusing from the title to the main editor on some more obscure browsers (which makes sense but shouldn't be happening) and in IE I've repeatedly seen the message which is supposed to display, appear as 'null'.

Having worked with window.onbeforeunload before, I seem to remember it works slightly differently in different browsers and is quite sensitive to subtle things like whether the return value is empty, null or undefined.

Steps to reproduce

1. Open a post
2. Enter text in the title
3. Enter text in the body
4. Wait for autosave

Technical Details

Browser: Chrome (does not happen on FF)
OS: Mac OSX

Possibly related:

https://code.google.com/p/chromium/issues/detail?id=341476

[brandonvanha]

@ErisDS Yesterday when I was delving into Ghost for the first time I noticed a couple of funny behaviors in regards to the Ghost modal ‘do you want to leave’. Maybe this will help you guys in debugging...

1. If you edit your post in Draft mode and exit Draft mode (e.g. by clicking on Settings) before Autosave kicks in, the ‘do you want to leave’ Ghost modal will appear. When the modal appears and you click ‘Leave’ it will leave the page and save your work. Originally, I thought that If I clicked ‘Leave’, it would leave the page and NOT save my work. Maybe the ‘leaving and saving’ part it’s by design?
2. If the article has been published, Autosave doesn’t work for me even after waiting a minute. If I edit a published article and exit Publish mode without clicking on 'Update Post' the ‘do you want to leave’ Ghost modal will appear. If I click ‘Leave’ it will leave the page and NOT save my work (unlike Draft mode).

The ‘Stay’ button works as expected in Draft and Publish modes.

Tech Specs:

Mac Yosemite v10.10
Ghost v0.5.3
Database: Sqlite3
Node.js v0.10.32
Chrome v38.0.2125.111
Firefox v33.0

[ErisDS]

If the article has been published, Autosave doesn’t work for me even after waiting a minute.

This is intentional, otherwise your changes would be pushed to the frontend before you were ready

[ErisDS]

P.S. @brandon-vanha Thanks for the further details ;) Your first note about leave saving is interesting.

I think we could reduce the number of cases in which there is a modal displayed by using willTransition to save the post if there's something to save.

The browser-based model is there to prevent tab-closes etc, so we'd still need that, but clearly it's getting triggered incorrectly.

I'm not sure if this is to do with our model of whether there's something to save being wrong, or if it is something to do with the transition from new->edit routes being handled incorrectly, or if it's a combination of the two.

@novaugust pinging you on this as it's vaguely related to #4321

[novaugust]

Hmm hmm, yeah, I've been playing around with getting that "Save before you go" to not show up just because of a default title (https://github.com/TryGhost/Ghost/pull/4387/files#diff-d97d5643b05afae9b3c5a9a041684c0bR102)

I'm very interested to see if I can reproduce the "leaving a draft saves" thing though.

[joeldrapper]

I can reproduce this bug on a live Ghost.org blog, but not locally so, it's either recently been unintentionally fixed, or it's environmental. I have been able to reproduce it in Google Chrome, Safari, and Firefox.

Let me know if you need any more details to reproduce this.

Steps to reproduce:

1. Create a new post.
2. Enter something in the title field and immediately tab to the content field as quickly as possible.
3. Type something in the content field and wait a few seconds.
4. Modal pops up.

Demonstration:

More information

• It doesn't seem to happen if you wait a few seconds between typing a title and moving on to the content editor. I guess it's possible that this is the reason I can't reproduce it locally because whatever is taking a few seconds online takes much less time locally.
• After the modal appears, if you immediately press the button to leave, the content is cleared from the editor, but if you leave it a few seconds before pressing "leave", nothing really seems to happen.

Technical details:

Online Ghost Version: 0.5.3
Online Server OS: Ghost.org
Online Node Version: No idea. It's a Ghost.org site.
Online Database: Mysql
Local Ghost Version: master (latest commit: 3b059d5)
Local Server OS: Mac OS X 10.10
Local Node Version: 0.10.31
Local Database: Sqlite3
Local Environment: Development
Client OS: Mac OS X 10.10
Browsers tested: Chrome 40.0.2209.0 dev (64-bit), Safari 8.0, Firefox 35.0a2 (2014-11-07)

[novaugust]

@joeldrapper That doesn't look like a bug, that looks like how it's suppose to work =) If you've typed stuff in and try to leave, it's going to warn you that you're losing your changes.

[ErisDS]

@novaugust I believe he's not trying to leave but just typing and waiting for the first autosave to fire I think?

The problem is that the first autosave is triggering the URL update, and this seems to be triggering a modal, even though it shouldn't be because we should be 'isSaving'

[novaugust]

Clearly, I'm out of my element here Walter.

On Tue, Nov 11, 2014 at 3:21 PM, Hannah Wolfe notifications@github.com
wrote:

@novaugust https://github.com/novaugust I believe he's not trying to
leave but just typing and waiting for the first autosave to fire I think?

The problem is that the first autosave is triggering the URL update, and
this seems to be triggering a modal, even though it shouldn't be.

—
Reply to this email directly or view it on GitHub
#4400 (comment).

[joeldrapper]

@ErisDS that's right, it appears before I try to leave. You should be able to reproduce it on a Ghost.org blog in any browser. Let me know if you need more details. I've updated the steps to reproduce to make it more clear.

[novaugust]

Yeah, I reproduced it no problem :) Sorry for the confusion

[novaugust]

Should be able to get on this this weekend and have it ready for the release..

[ErisDS]

@novaugust awesome 👍

[novaugust]

I've figured out what's happening here, and it's a latency issue. To reproduce it locally, just use chrome's dev throttle.

1. user focuses in to body: async save starts, saving the model with no body
2. user types into the body
3. save finishes, starts transition
   3a. the user has typed information since the model was saved; therefore, they're in a "dirty" state and nagged if they're sure they want to leave the page

We'd never see it in development, where local requests happen faster than we can type a single character.

It should be possible to make the "dirty transition" bit somewhat smarter - the "willTransition" event needs to just check if the transition is going to editor/<the_id>

[ErisDS]

So, I've tested out this issue on master. I could not get it to happen on windows chrome, but on mac (yosemite) chrome it happened first time! Good shout on the timing issue 👍