Fix bug when submitting form triggered a warning and potentially left submit button disable

jquery-ujs automatically disable submit button when submitting the form.
If one choose cancel on the leaving page warning, then the submit buttons
end up in a disable state, with no way to re enable them. This fix
prevent the warning from being triggered when submitting the form, so
we can't end up in the scenario described.

app/views/admin/order_cycles/checkout_options.html.haml

@@ -3,7 +3,7 @@
 - content_for :page_title do
   = t :edit_order_cycle
 
-= form_for [main_app, :admin, @order_cycle], html: { class: "order_cycle" , data: { controller: 'unsaved-changes', action: 'beforeunload@window->unsaved-changes#leavingPage', 'unsaved-changes-changed': "false" } } do |f|
+= form_for [main_app, :admin, @order_cycle], html: { class: "order_cycle" , data: { controller: 'unsaved-changes', action: 'unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage', 'unsaved-changes-changed': "false" } } do |f|
 
   = render 'wizard_progress'
 

app/webpacker/controllers/unsaved_changes_controller.js

@@ -6,7 +6,7 @@ import { Controller } from "stimulus";
 // - with beforeunload event :
 //    <form
 //      data-controller="unsaved-changes"
-//      data-action="beforeunload@window->unsaved-changes#leavingPage"
+//      data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage"
 //      data-unsaved-changes-changed="true"
 //    >
 //      <input data-action="change->unsaved-changes#formIsChanged" />
@@ -15,14 +15,19 @@ import { Controller } from "stimulus";
 // - with turbolinks :
 //    <form
 //      data-controller="unsaved-changes"
-//      data-action="turbolinks:before-visit@window->unsaved-changes#leavingPage"
+//      data-action="unsaved-changes#submit turbolinks:before-visit@window->unsaved-changes#leavingPage"
 //      data-unsaved-changes-changed="true"
 //    >
 //      <input data-action="change->unsaved-changes#formIsChanged" />
 //    </form>
 //
-// You can also combine the two actions
-// You also need to add 'data-action="change->unsaved-changes#formIsChanged"' on all the form element
+// You can also combine the two event trigger ie : 
+//    <form
+//      data-controller="unsaved-changes"
+//      data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage"
+//      data-unsaved-changes-changed="true"
+//    >
+// You then need to add 'data-action="change->unsaved-changes#formIsChanged"' on all the form element
 // that can be interacted with
 //
 // Optional, you can add 'data-unsaved-changes-changed="true"' if you want to disable all
@@ -71,6 +76,11 @@ export default class extends Controller {
     }
   }
 
+  submit(event) {
+    // if we are submitting the form, we don't want to trigger a warning so set changed to false 
+    this.setChanged("false")
+  }
+
   setChanged(changed) {
     this.data.set("changed", changed);
   }

spec/javascripts/stimulus/unsaved_changes_controller_test.js

@@ -15,7 +15,8 @@ describe("UnsavedChangesController", () => {
     document.body.innerHTML = `
       <form 
         id="test-form" 
-        data-controller="unsaved-changes" data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
+        data-controller="unsaved-changes" 
+        data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
         data-unsaved-changes-changed="false"
       >
         <input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
@@ -29,8 +30,9 @@ describe("UnsavedChangesController", () => {
       beforeEach(() => {
         document.body.innerHTML = `
           <form 
-            id="test-form" data-controller="unsaved-changes" 
-            data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
+            id="test-form" 
+            data-controller="unsaved-changes" 
+            data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
             data-unsaved-changes-changed="false" 
             data-unsaved-changes-disable-submit-button="true"
           >
@@ -53,7 +55,7 @@ describe("UnsavedChangesController", () => {
           <form 
             id="test-form" 
             data-controller="unsaved-changes" 
-            data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
+            data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
             data-unsaved-changes-changed="false" 
             data-unsaved-changes-disable-submit-button="false"
           >
@@ -192,4 +194,39 @@ describe("UnsavedChangesController", () => {
       })
     })
   })
+
+  describe('#submit', () => {
+    let checkbox
+
+    beforeEach(() => {
+      // Add a mock I18n object to
+      const mockedT = jest.fn()
+      mockedT.mockImplementation((string) => (string))
+
+      global.I18n =  {
+        t: mockedT
+      }
+
+      checkbox = document.getElementById("test-checkbox")
+    })
+
+    afterEach(() => {
+      delete global.I18n
+    })
+
+    describe('when submiting the form', () => {
+      it("changed is set to true", () => {
+        const form = document.getElementById("test-form")
+
+        // interact with the form
+        checkbox.click()
+
+        // submit the form 
+        const submitEvent = new Event("submit")
+        form.dispatchEvent(submitEvent)
+
+        expect(form.dataset.unsavedChangesChanged).toBe("false")
+      })
+    })
+  })
 })