Contextual Save Bar Leave Guard

ProNew

Unsaved changes protection: the save bar plus a beforeunload prompt while dirty, and an in-app navigation link that asks Save, Discard or Stay before leaving.

Customize

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.

initial

Guide and examples

When to use it

Use this when people can lose real work by closing a tab or clicking a link: editors, long forms, configuration pages.

Do not use it when the form autosaves (guarding adds friction for no benefit).

Installation

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.

Props

Prop	Type	Required	Description
`initial`	`string`	required	-
`onSave`	`(value: string) => Promise<void>`	required	-
`onLeave`	`() => void`	required	Called when the person has chosen to leave (after saving or discarding).

Accessibility

The in-app prompt is an alertdialog with focus on the safe option, Stay.
beforeunload is registered only while there are unsaved changes.
A save failure is a role=alert and the person stays on the page.

Testing

The pattern ships with a Testing Library test (contextual-save-bar-leave-guard.test.tsx) that covers leaving when clean, the beforeunload guard, the three-way prompt, save and leave, discard and leave and a failed save.