How to avoid loss of data when navigating away?

[tristan-orourke]

Description

With a complicated form, we don't want users to accidentally navigate away from a half-finished form and lose a bunch of work.

Thoughts:

• Can we easily intercept any navigation attempts and throw up a modal? Is that even good UI? Any accessibility concerns?
• Can we cache half-complete forms instead? How? Browser localStorage? How much do we cache - just forms for new experience, or edits to existing ones? Does it have kind of expiration?

[patcon]

Intercepting navigation feels like a heavy-handing strategy, but maybe easiest.

But for UX, I feel like this is a great place for a localstorage hook. Why make users read a popup when we can just save them from thinking :)

(not sure how bloated the packages are, so maybe best to homebrew the hook)

https://usehooks.com/useLocalStorage/
https://github.com/donavon/use-persisted-state
https://github.com/astoilkov/use-local-storage-state via donavon/use-persisted-state#36 (comment)

Re: autosave. Further, even if form data is persisted, hinting at this before the moment of panic is nice. To avoid the brief "oh shit!" feeling of accidentally leaving, there's room for an autosave UI patterns to let people know that their fields are immediately saved (e.g., checkmark flash beside field onBlur).

Important consideration it to make sure people don't assume data is automatically submitted just because it is persisting. Good to be clear that submission is still required, even once they know the data seems to be "saved".

[tristan-orourke]

@patcon I like that useHooks library! I think I've basically written some of those myself before.

@JoshBeveridge there's some UX consideration to be had here.

[JoshBeveridge]

@tristan-orourke and I chatted this through, and I think having both a native browser alert AND caching is the ideal situation, but we can settle for caching first if that's going to handle a majority of users. Tristan thinks you might have to listen for the navigation event anyway, so implementing either will require checking for it.