A lightweight plugin to prevent losing data when editing forms. No dependencies.
It supports Trix editor and Turbolinks 5.
You can get it via npm:
npm install dirty-form --save
Or yarn:
yarn add dirty-form
import DirtyForm from 'dirty-form'
let form = document.querySelector('#form')
new DirtyForm(form)If you want to customize the message:
new DirtyForm(form, {
message: 'You have unsaved changes. Are you sure you want to leave?',
})<%= form_with url: posts_path, html: { data: { controller: 'dirty-form' } } do |form| %>
<%= form.text_field :title %>
<% end %>// dirty_form_controller.js
import { Controller } from 'stimulus'
import DirtyForm from 'dirty-form'
export default class extends Controller {
connect() {
new DirtyForm(this.element)
}
}