Unload socket on external nav. Closes #2311 #2276

assets/js/phoenix_live_view/dom_patch.js

@@ -222,7 +222,7 @@ export default class DOMPatch {
     }
 
     if(externalFormTriggered){
-      liveSocket.disconnect()
+      liveSocket.unload()
       externalFormTriggered.submit()
     }
     return true

assets/js/phoenix_live_view/live_socket.js

@@ -238,6 +238,13 @@ export default class LiveSocket {
 
   // private
 
+  unload(){
+    if(this.main && this.isConnected()){ this.log(this.main, "socket", () => ["disconnect for page nav"]) }
+    this.unloaded = true
+    this.destroyAllViews()
+    this.disconnect()
+  }
+
   triggerDOM(kind, args){ this.domCallbacks[kind](...args) }
 
   time(name, func){
@@ -624,7 +631,10 @@ export default class LiveSocket {
         this.clickStartedAtTarget = null
       }
       let phxEvent = target && target.getAttribute(click)
-      if(!phxEvent){ return }
+      if(!phxEvent){
+        if(!capture && e.target.href !== undefined){ this.unload() }
+        return
+      }
       if(target.getAttribute("href") === "#"){ e.preventDefault() }
 
       this.debounce(target, e, "click", () => {
@@ -781,6 +791,7 @@ export default class LiveSocket {
       if(!externalFormSubmitted && phxChange && !phxSubmit){
         externalFormSubmitted = true
         e.preventDefault()
+        this.unload()
         this.withinOwners(e.target, view => {
           view.disableForm(e.target)
           window.requestAnimationFrame(() => e.target.submit()) // safari needs next tick
@@ -790,7 +801,7 @@ export default class LiveSocket {
 
     this.on("submit", e => {
       let phxEvent = e.target.getAttribute(this.binding("submit"))
-      if(!phxEvent){ return }
+      if(!phxEvent){ return this.unload() }
       e.preventDefault()
       e.target.disabled = true
       this.withinOwners(e.target, view => {

priv/static/phoenix_live_view.js

@@ -1686,7 +1686,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             dom_default.copyPrivates(toEl, fromEl);
             dom_default.discardError(targetContainer, toEl, phxFeedbackFor);
             let isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
-            if (isFocusedFormEl) {
+            if (isFocusedFormEl && fromEl.type !== "hidden") {
               this.trackBefore("updated", fromEl, toEl);
               dom_default.mergeFocusedInput(fromEl, toEl);
               dom_default.syncAttrsToProps(fromEl);
@@ -1731,7 +1731,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       }
       if (externalFormTriggered) {
-        liveSocket.disconnect();
+        liveSocket.unload();
         externalFormTriggered.submit();
       }
       return true;
@@ -3434,6 +3434,14 @@ within:
     execJS(el, encodedJS, eventType = null) {
       this.owner(el, (view) => js_default.exec(eventType, encodedJS, view, el));
     }
+    unload() {
+      if (this.main && this.isConnected()) {
+        this.log(this.main, "socket", () => ["disconnect for page nav"]);
+      }
+      this.unloaded = true;
+      this.destroyAllViews();
+      this.disconnect();
+    }
     triggerDOM(kind, args) {
       this.domCallbacks[kind](...args);
     }
@@ -3825,6 +3833,9 @@ within:
         }
         let phxEvent = target && target.getAttribute(click);
         if (!phxEvent) {
+          if (!capture && e.target.href !== void 0) {
+            this.unload();
+          }
           return;
         }
         if (target.getAttribute("href") === "#") {
@@ -3983,6 +3994,7 @@ within:
         if (!externalFormSubmitted && phxChange && !phxSubmit) {
           externalFormSubmitted = true;
           e.preventDefault();
+          this.unload();
           this.withinOwners(e.target, (view) => {
             view.disableForm(e.target);
             window.requestAnimationFrame(() => e.target.submit());
@@ -3992,7 +4004,7 @@ within:
       this.on("submit", (e) => {
         let phxEvent = e.target.getAttribute(this.binding("submit"));
         if (!phxEvent) {
-          return;
+          return this.unload();
         }
         e.preventDefault();
         e.target.disabled = true;