From fd278e00865b44f754e2587161cd75fc54520eef Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Wed, 8 Feb 2023 16:28:41 +1100
Subject: [PATCH] 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.
---
 .../order_cycles/checkout_options.html.haml   |  2 +-
 .../controllers/unsaved_changes_controller.js | 18 ++++++--
 .../unsaved_changes_controller_test.js        | 45 +++++++++++++++++--
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/app/views/admin/order_cycles/checkout_options.html.haml b/app/views/admin/order_cycles/checkout_options.html.haml
index 9138c14565..cfd7926990 100644
--- a/app/views/admin/order_cycles/checkout_options.html.haml
+++ b/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'
 
diff --git a/app/webpacker/controllers/unsaved_changes_controller.js b/app/webpacker/controllers/unsaved_changes_controller.js
index 7e2bc5055f..b3e042a84a 100644
--- a/app/webpacker/controllers/unsaved_changes_controller.js
+++ b/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);
   }
diff --git a/spec/javascripts/stimulus/unsaved_changes_controller_test.js b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
index f6d8544ff7..061f876db2 100644
--- a/spec/javascripts/stimulus/unsaved_changes_controller_test.js
+++ b/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")
+      })
+    })
+  })
 })