Cancel Restore Focus - Everyday Interface Patterns

A native dialog cancel action closes the dialog, restores focus to the opener, and reports that nothing changed.

Program

Cancel flows should leave people where they started. This pattern keeps a reference to the opener and restores focus after closing.

cancel_restore_focus.html

Visuals: captured from real browser rendering

<button id="open-note">Edit note</button>
<dialog id="note-dialog" aria-labelledby="note-title">
  <h2 id="note-title">Edit note</h2>
  <input id="note-text" value="Draft note">
  <button id="cancel-note">Cancel</button>
</dialog>
<p id="note-status" role="status">Note unchanged.</p>
<style>
  #open-note:focus { outline: 3px solid #2563eb; }
</style>
<script>
  const openNote = document.querySelector("#open-note");
  const noteDialog = document.querySelector("#note-dialog");
  const cancelNote = document.querySelector("#cancel-note");
  const noteStatus = document.querySelector("#note-status");
  let restoreTarget = openNote;
  openNote.addEventListener("click", () => {
    restoreTarget = openNote;
    if (noteDialog.showModal) noteDialog.showModal();
  });
  cancelNote.addEventListener("click", () => {
    noteDialog.close("cancel");
    restoreTarget.focus();
    noteStatus.textContent = "Edit canceled. Focus restored.";
  });
</script>

Create the opener button.
The opener is the focus target after cancel.
Create the edit dialog.
The edit UI uses a native dialog element.
Style restored focus.
The opener has a visible focus ring after cancel.
Store the restore target.
The script keeps the opener for later focus restoration.
Listen for the open click.
Clicking Edit note opens the dialog path.
Close the dialog as canceled.
The cancel action closes without saving.
Restore focus and report cancel.
Focus returns to Edit note and the status reports the cancellation.

restore focus After a dialog closes, focus should return to a useful control.

cancel action Cancel exits without applying the edit.

status text A status message can confirm that no change was made.