Notify the form/buttons components of a disconnect before a page reload. This gives the native components an opportunity to reset their state before the fresh page loads.

app/javascript/controllers/bridge/buttons_controller.js

@@ -5,6 +5,14 @@ export default class extends BridgeComponent {
   static component = "buttons"
   static targets = [ "button" ]
 
+  connect() {
+    window.addEventListener("beforeunload", this.handleBeforeUnload.bind(this))
+  }
+
+  disconnect() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnload.bind(this))
+  }
+
   buttonTargetConnected() {
     this.notifyBridgeOfConnect()
   }
@@ -27,6 +35,14 @@ export default class extends BridgeComponent {
     })
   }
 
+  notifyBridgeOfDisconnect() {
+    this.send("disconnect")
+  }
+
+  handleBeforeUnload() {
+    this.notifyBridgeOfDisconnect()
+  }
+
   #clickButton(message) {
     const selectedIndex = message.data.selectedIndex
     this.#enabledButtonTargets[selectedIndex].click()

app/javascript/controllers/bridge/form_controller.js

@@ -6,13 +6,21 @@ export default class extends BridgeComponent {
   static targets = [ "submit", "cancel" ]
   static values = { submitTitle: String }
 
+  connect() {
+    window.addEventListener("beforeunload", this.handleBeforeUnload.bind(this))
+  }
+
+  disconnect() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnload.bind(this))
+  }
+
   submitTargetConnected() {
     this.notifyBridgeOfConnect()
     this.#observeSubmitTarget()
   }
 
   submitTargetDisconnected() {
-    this.notifyBridgeOfDisonnect()
+    this.notifyBridgeOfDisconnect()
     this.submitObserver?.disconnect()
   }
 
@@ -37,7 +45,7 @@ export default class extends BridgeComponent {
     }
   }
 
-  notifyBridgeOfDisonnect() {
+  notifyBridgeOfDisconnect() {
     this.send("disconnect")
   }
 
@@ -49,6 +57,10 @@ export default class extends BridgeComponent {
     this.send("submitEnd")
   }
 
+  handleBeforeUnload() {
+    this.notifyBridgeOfDisconnect()
+  }
+
   #observeSubmitTarget() {
     this.submitObserver = new MutationObserver(() => {
       this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")