Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add unsaved changes warning to form #714

Merged
merged 4 commits into from
Oct 17, 2024
Merged

Add unsaved changes warning to form #714

merged 4 commits into from
Oct 17, 2024

Conversation

3mcd
Copy link
Member

@3mcd 3mcd commented Oct 10, 2024

Issue(s) Resolved

Kind of related to #692. These changes would at least notify users if they would lose progress.

Also partially related to #445, in that it introduces a general-purpose React hook for warning about unsaved changes. The general strategy here can be used on the form builder as well.

High-level Explanation of PR

This PR changes the external form fill page to notify the user about unsaved changes when navigating. It uses the standard beforeunload method of notifying the user in a blocking manner, giving them the opportunity to cancel navigation.

The PR accounts for autosave by clearing the "dirty" flag from the form after an auto-save occurs.

I also change the form to only submit changed values which can potentially make Pub editing w/ forms a bit snappier.

Test Plan

  1. Open a form fill page.
  2. Change a value. Attempt to navigate or reload the page. You should be prompted by the browser that you have unsaved changes. Hit cancel to stay on the current page.
  3. Wait for an auto-save to trigger. Navigate or refresh again. You should not be prompted.

@3mcd 3mcd marked this pull request as ready for review October 15, 2024 19:57
@3mcd 3mcd changed the title prompt unsaved changes when navigating away from form; optimize payload Add unsaved changes warning to form Oct 16, 2024
@allisonking
Copy link
Contributor

Hm it looks like I'm still getting the prompt even after an autosave (see vid)

Screen.Recording.2024-10-16.at.12.46.50.PM.mov

Copy link
Contributor

@allisonking allisonking left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried again on a reset db and things work for me now! 🎉

* add unsaved changes warning to formbuilder; disable save buttons when form unchanged

* reorder hooks

* rename isDirty search param to unsavedChanges
@3mcd 3mcd merged commit 040cfeb into main Oct 17, 2024
8 checks passed
@3mcd 3mcd deleted the em/form-unsaved-changes branch October 17, 2024 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants