From d904c2a4941d7ea48803dc1bf087913dc2fc39f5 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 3 Apr 2024 14:04:17 +1100
Subject: [PATCH] Don't warn when submitting form

---
 .../controllers/bulk_form_controller.js       | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/webpacker/controllers/bulk_form_controller.js b/app/webpacker/controllers/bulk_form_controller.js
index d5a84545dd..b81165f9f0 100644
--- a/app/webpacker/controllers/bulk_form_controller.js
+++ b/app/webpacker/controllers/bulk_form_controller.js
@@ -23,18 +23,22 @@ export default class BulkFormController extends Controller {
   recordElements = {};
 
   connect() {
+    this.submitting = false;
     this.form = this.element;
 
     // Start listening for any changes within the form
     this.#registerElements(this.form.elements);
 
     this.toggleFormChanged();
+
+    this.form.addEventListener("submit", this.#registerSubmit.bind(this));
+    window.addEventListener("beforeunload", this.preventLeavingChangedForm.bind(this));
   }
 
   disconnect() {
     // Make sure to clean up anything that happened outside
     this.#disableOtherElements(false);
-    window.removeEventListener("beforeunload", this.preventLeavingBulkForm);
+    window.removeEventListener("beforeunload", this.preventLeavingChangedForm.bind(this));
   }
 
   // Register any new elements (may be called by another controller after dynamically adding fields)
@@ -59,11 +63,11 @@ export default class BulkFormController extends Controller {
     const changedRecordCount = Object.values(this.recordElements).filter((elements) =>
       elements.some(this.#isChanged)
     ).length;
-    const formChanged = changedRecordCount > 0 || this.errorValue;
+    this.formChanged = changedRecordCount > 0 || this.errorValue;
 
     // Show actions
-    this.hasActionsTarget && this.actionsTarget.classList.toggle("hidden", !formChanged);
-    this.#disableOtherElements(formChanged); // like filters and sorting
+    this.hasActionsTarget && this.actionsTarget.classList.toggle("hidden", !this.formChanged);
+    this.#disableOtherElements(this.formChanged); // like filters and sorting
 
     // Display number of records changed
     const key = this.hasChangedSummaryTarget && this.changedSummaryTarget.dataset.translationKey;
@@ -71,25 +75,26 @@ export default class BulkFormController extends Controller {
       // TODO: save processing and only run if changedRecordCount has changed.
       this.changedSummaryTarget.textContent = I18n.t(key, { count: changedRecordCount });
     }
+  }
 
-    // Prevent accidental data loss
-    if (formChanged) {
-      window.addEventListener("beforeunload", this.preventLeavingBulkForm); // TOFIX: what if it has laredy been added? we can optimise above to avoid this
-    } else {
-      window.removeEventListener("beforeunload", this.preventLeavingBulkForm);
+  // If form is not being submitted, warn to prevent accidental data loss
+  preventLeavingChangedForm(event) {
+    if (this.formChanged && !this.submitting){
+      // Cancel the event
+      event.preventDefault();
+      // Chrome requires returnValue to be set, but ignores the value. Other browsers may display
+      // this if provided, but let's not create a new translation key, and keep the behaviour
+      // consistent.
+      event.returnValue = "";
     }
   }
 
-  preventLeavingBulkForm(e) {
-    // Cancel the event
-    e.preventDefault();
-    // Chrome requires returnValue to be set. Other browsers may display this if provided, but let's
-    // not create a new translation key, and keep the behaviour consistent.
-    e.returnValue = "";
-  }
-
   // private
 
+  #registerSubmit() {
+    this.submitting = true;
+  }
+
   #registerElements(elements) {
     for (const element of elements) {
       element.addEventListener("input", this.toggleChanged.bind(this)); // immediately respond to any change