Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA dialog that will not lose work: closing it with unsaved changes shows an inline Discard changes row with focus on Keep editing instead of stacking a second dialog.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for edit dialogs where leaving by reflex is likely (Escape, a click outside). It keeps the dialog count at one and puts the question exactly where the person is looking.
Do not use it for navigation away from a page (use confirm-unsaved-changes), and do not ask when nothing changed: pass dirty={false}.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | The element that opens the dialog. |
title, description | ReactNode | - | Dialog text. |
dirty | boolean | - | True when there are unsaved changes. |
onDiscard | () => void | - | Reset the form. |
onSave | () => void | Promise<void> | - | Save; the dialog closes afterwards. |
children | ReactNode | - | The form. |
alertdialog named "Discard your changes?" and focus moves to the safe choice, Keep editing.| Key | Action |
|---|---|
| Escape | closes, or asks first when there are unsaved changes |
| Tab | Keep editing, Discard |
The pattern ships a Testing Library test (dialog-dirty-guard.test.tsx) that covers closing when clean, the inline question and its focus, keeping, discarding and saving.