FormDirtyConfirmNavigationController
Purpose
Track whether any of the inputs elements of a <form> have changed their value from the value they loaded with,
and if so prevent navigation away from the page without confirmation.
Adds data-dirty to any inputs being watched that change value, and removes data-dirty if it returns to its initial value.
Adds data-dirty to the form if any of the child inputs are different to the value they loaded with, and removes it when all elements are returned to their initial values.
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 |
|---|---|---|---|
- | - | - | - |
Events
| Event | When | Dispatched on | event.detail |
|---|---|---|---|
input-dirtied | - | the input, textarea or select that changed | target: the input that changed |
input-cleaned | - | the input, textarea or select that changed | target: the input that changed |
form-dirtied | - | the form that changed | target: the form that changed |
form-cleaned | - | the form that changed | target: the form that changed |
Side Effects
Adds input and change event listeners to the attached form, bubbled up from any child inputs.
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.