Liveview form autosave

For a form I’ve implemented a Google-docs-style auto-save. I’m just saving the form on phx-validate. It saves the state correctly to the db, and works almost perfectly.
However if you edit multiple fields fast after each other (and have debounce and/or latency), the fields that you edited first is often overwritten with the old data. If you refresh the page the correct (modfied) data appears.
Now, I realize saving on validate is sort of an anti-pattern. However I don’t know how to implement auto-save in another way. Any suggestions?

You can save periodically using a timer. Say every 10 secs or so.

I’ll try that. I found this blog post, which claims to have solved it. I’ll give that a go!
https://janezurevc.name/real-time-auto-save-phoenix-liveview

1 Like

Yikes. I can’t do that, since it’s inside a LiveComponent, so I can’t do send self(), :store :face_with_head_bandage:

Now trying to move the source of truth to the parent live view, but it’s hard because I have nested components.

You can use PubSub

I can? I thought LiveComponent doesn’t have handle_info, only handle_event?

Sorry my bad. Didn’t realize. Then perhaps moving the source of truth to the parent live view would be the only option I guess.

1 Like