ConfirmNavigationController
Purpose
Alert the user when they try to navigate away from a page that might have unsaved changes on it. Form submissions will not trigger the dialogue, but closing the page or navigating away will get a confirmation dialogue.
Works with Turbolinks and Hotwire/Turbo.
Actions
| Action | Purpose |
|---|---|
- | - |
Targets
| Target | Purpose | Default |
|---|---|---|
- | - | - |
Classes
| Class | Purpose | Default |
|---|---|---|
- | - | - |
Values
| Value | Type | Description | Default |
|---|---|---|---|
message | String | The message to show to the user (if supported by the browser) | The native browser are you sure? dialogue |
Events
| Event | When | Dispatched on | event.detail |
|---|---|---|---|
- | - | - | - |
Side Effects
Adds event listeners onto the window, and shows a confirmation dialogue for:
popstatesubmit.turbolinks:before-visitturbo:before-visit.
Also adds a native confirmation dialogue using window.onbeforeunload, to detect tab closing.
How to Use
When an event occurs that would cause a page to be unloaded, replaced, or otherwise navigated away from: this controller will show a confirm dialogue to the user with the specified message, that will cancel said event if the user clicks "cancel".
Therefore, to prevent accidental navigation on pages where you apply changes that might get lost. You might do:
Or if you are applying changes using Javascript that might get lost, you could add the following to prevent lost changes:
document.body.dataset.controller += ' confirm-navigation '