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

ErisDS commented 9 years ago

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

Open a post
Enter text in the title
Enter text in the body
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 commented 9 years ago

@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...

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?
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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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:

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

Demonstration:

Ghost Bug

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: 3b059d5829c5bd103ed38e60203a9a2e9356ed2a) 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 commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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 https://github.com/TryGhost/Ghost/issues/4400#issuecomment-62632746.

joeldrapper commented 9 years ago

@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 commented 9 years ago

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

novaugust commented 9 years ago

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

ErisDS commented 9 years ago

@novaugust awesome :+1:

novaugust commented 9 years ago

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

user focuses in to body: async save starts, saving the model with no body
user types into the body
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 commented 9 years ago

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 :+1:

TryGhost / Ghost