Guard In-App Navigation While Dirty

ProNew

Intercepts clicks on links while a form has unsaved changes and asks first (Stay, or Leave without saving), while the browser's own prompt covers reloads and closing the tab. Use this when your router has no built-in guard for a form.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A form with edits sits on a page with navigation links, and a click on a link would lose the edits.

Do not use it when: Prefer your router's own blocker API (Next.js and React Router have patterns for it) when it exists; this shows the idea with plain links.

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	Description
`onLeave`	`(href) => void`	Called after "Leave without saving" with the link target; navigate with your router.

The hook useLinkGuard(dirty, onLeave) is exported and returns { pending, stay, leave } for your own dialog.

Accessibility

The question is an alertdialog with the safe choice ("Stay on this page") as the cancel action, which Radix focuses first; Escape also stays.
In-page anchors, links that open a new tab or download, and clicks with Ctrl, Cmd, Shift or Alt are not intercepted, so the browser's normal behaviour for them is kept.
The reload and tab-close cases are covered by the browser's native prompt. A text line under the field says that leaving will ask first.

Testing

The pattern ships with a Testing Library test (navigation-guard-dirty-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A form with edits sits on a page with navigation links, and a click on a link would lose the edits.

Do not use it when: Prefer your router's own blocker API (Next.js and React Router have patterns for it) when it exists; this shows the idea with plain links.

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	Description
`onLeave`	`(href) => void`	Called after "Leave without saving" with the link target; navigate with your router.

The hook useLinkGuard(dirty, onLeave) is exported and returns { pending, stay, leave } for your own dialog.

Accessibility

The question is an alertdialog with the safe choice ("Stay on this page") as the cancel action, which Radix focuses first; Escape also stays.
In-page anchors, links that open a new tab or download, and clicks with Ctrl, Cmd, Shift or Alt are not intercepted, so the browser's normal behaviour for them is kept.
The reload and tab-close cases are covered by the browser's native prompt. A text line under the field says that leaving will ask first.

Testing

The pattern ships with a Testing Library test (navigation-guard-dirty-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.