Improve form validation event unbinding

Author: rsmithlal

app/javascript/controllers/better_together/form_validation_controller.js

@@ -12,6 +12,8 @@ export default class extends Controller {
     this._onSubmit = this.handleFormSubmit.bind(this);
     this._onSubmitEnd = this.handleSubmitEnd.bind(this);
     this._onBeforeVisit = this.handleTurboNavigation.bind(this);
+    this._onBeforeCache = this.handleBeforeCache?.bind(this) || this.handleBeforeCache.bind(this);
+    this._onBeforeUnload = this.handleBeforeUnload.bind(this);
 
     this.element.addEventListener("input", this._onInput);
 
@@ -31,28 +33,37 @@ export default class extends Controller {
 
     // Handle Turbo navigation (unsaved changes warning)
     document.addEventListener("turbo:before-visit", this._onBeforeVisit);
+    // Clean up transient UI before Turbo caches the page
+    document.addEventListener("turbo:before-cache", this._onBeforeCache);
+    // Warn on full page unload if there are unsaved changes
+    window.addEventListener("beforeunload", this._onBeforeUnload);
   }
 
   disconnect() {
     // Remove all listeners using the cached handler references
     if (this._onBeforeVisit) document.removeEventListener("turbo:before-visit", this._onBeforeVisit);
+    if (this._onBeforeCache) document.removeEventListener("turbo:before-cache", this._onBeforeCache);
     if (this._onSubmitEnd) this.element.removeEventListener("turbo:submit-end", this._onSubmitEnd);
     if (this._onSubmit) this.element.removeEventListener("submit", this._onSubmit);
     if (this._onChange) this.element.removeEventListener("change", this._onChange);
     if (this._onInput) this.element.removeEventListener("input", this._onInput);
+    if (this._onBeforeUnload) window.removeEventListener("beforeunload", this._onBeforeUnload);
   }
 
   storeInitialValues() {
     const fields = this.element.querySelectorAll("input, select, textarea");
     fields.forEach(field => {
-      this.originalValues.set(field, field.value);
+      this.originalValues.set(field, this.getFieldValue(field));
     });
   }
 
   markFieldAsDirty(event) {
     const field = event.target;
 
-    if (this.originalValues.get(field) !== field.value) {
+    const original = this.originalValues.get(field);
+    const current = this.getFieldValue(field);
+
+    if (!this.valuesEqual(original, current)) {
       this.dirtyFields.add(field);
     } else {
       this.dirtyFields.delete(field);
@@ -150,6 +161,56 @@ export default class extends Controller {
     this.storeInitialValues(); // Re-store current values as "original"
   }
 
+  // Normalize field value for dirty tracking
+  getFieldValue(field) {
+    const tag = field.tagName.toLowerCase();
+    if (tag === "input") {
+      const type = (field.getAttribute("type") || "text").toLowerCase();
+      if (type === "checkbox" || type === "radio") {
+        return field.checked;
+      }
+      return field.value;
+    }
+    if (tag === "select") {
+      if (field.multiple) {
+        return Array.from(field.options)
+          .filter(o => o.selected)
+          .map(o => o.value)
+          .sort();
+      }
+      return field.value;
+    }
+    // textarea or others
+    return field.value;
+  }
+
+  valuesEqual(a, b) {
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) return false;
+      }
+      return true;
+    }
+    return a === b;
+  }
+
+  // Clear transient UI before Turbo caches the page
+  handleBeforeCache() {
+    this.resetValidation();
+    this.isSubmitting = false;
+  }
+
+  // Show native prompt on hard reload/close if form is dirty
+  handleBeforeUnload(event) {
+    if (this.isFormDirty() && !this.isSubmitting) {
+      event.preventDefault();
+      event.returnValue = ""; // Required for Chrome to show prompt
+      return ""; // For older browsers
+    }
+    return undefined;
+  }
+
   showErrorMessage(field) {
     const errorMessage = field.nextElementSibling;
     if (errorMessage?.classList.contains("invalid-feedback")) {