Unsaved Changes Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the editor: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. Back to posts in the header opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Keep editing, and the copy stays closed until a reload. Both show the same LeaveFields component. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

changesOf(before, after) compares two typed essays, the saved one and the one on the page, and returns a row for each difference: a title that changed, paragraphs added or removed, a cover added or removed. The count in the heading is the length of that list, and "since your last save at 10:42" is a typed time, never the clock. In your app compare your editor's saved snapshot with its current state the same way, and keep the list short: a summary of ten rows is a wall.

Leaving can mean three things: keep the work and go, throw it away and go, or not go. Save and leave is the Shine Button and the only primary; Discard changes is outline; Keep editing is ghost and takes focus when the real alert opens, so a stray Enter backs out instead of losing work. Escape and a click on Keep editing do the same thing, and a click outside does not close the alert, since it has to be answered. Keep editing is the focus target through initialFocus.

They change local state and say so in a polite status message: nothing is stored or removed. Saving shows the posts list with the new title and "Saved in this demo"; discarding shows it with the old title and "Changes discarded". In your app save in save, keep the alert open with a busy state until the server answers, and leave only on success; on failure say so inside the alert and keep Keep editing in reach. Wire the same alert to your router's leave guard and to the browser's own prompt for a closed tab.

Keep editing returns to Back to posts, the only live control in the drawn editor. After Save and leave or Discard changes that button is gone, so about 300 ms later, once the alert has handed focus back, focus moves to Open the essay, the button that took its place. The copy shown on load moves no focus; Escape inside it and its buttons behave the same way.

The copy shown on load docks to the foot of the page as a bottom sheet with its actions pinned: Save and leave across the full width, and Keep editing and Discard changes side by side under it, while the list scrolls above. The real alert keeps the Alert Dialog's own layout: a centred card as wide as the screen allows.