Unsaved Changes Dialog
Leave confirmation dialog listing three specific unsaved field changes with Discard, Keep editing, and Save and leave actions.
Leave confirmation dialog listing three specific unsaved field changes with Discard, Keep editing, and Save and leave actions.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Unsaved Changes Dialog is the navigation guard shown when a user tries to leave a settings page with pending edits. The headline You have unsaved changes pairs with the instruction: leaving now will lose the edits below, you can save them first or discard and continue. Three bullets name the exact changes: webhook URL changed from api.old-vendor.com to api.new-vendor.com, retry policy set to 5 attempts was 3, and secret header added with the key set but the value not yet saved.
The unsavedItems array is what turns this from a generic warning into a useful one. A footer note explains that saving navigates to the destination after the config is written and fires a test ping. Three buttons cover all exit paths: Discard changes, Keep editing, and Save and leave as primary.
Reach for this block as the route-change guard on any settings or form page where edits can be partially complete. Wire it to your router beforeunload or navigation interception, and populate unsavedItems from your form dirty state.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the webhook settings guard with specific field changes listed. Other leave-confirm dialogs this shape fits:
Tip: list the actual changed values not just the field names; api.new-vendor.com is harder to discard by accident than Webhook URL.