phoenix_live_view 1.1.13 → 1.1.14

package/assets/js/phoenix_live_view/view.js

@@ -38,6 +38,8 @@ import {
   PHX_VIEWPORT_BOTTOM,
   MAX_CHILD_JOIN_ATTEMPTS,
   PHX_LV_PID,
+  PHX_PORTAL,
+  PHX_TELEPORTED_REF,
 } from "./constants";
 
 import {
@@ -398,7 +400,7 @@ export default class View {
     this.log(type, () => ["", clone(rawDiff)]);
     const { diff, reply, events, title } = Rendered.extract(rawDiff);
     callback({ diff, reply, events });
-    if (typeof title === "string" || type == "mount") {
+    if (typeof title === "string" || (type == "mount" && this.isMain())) {
       window.requestAnimationFrame(() => DOM.putTitle(title));
     }
   }
@@ -724,6 +726,15 @@ export default class View {
     // recovery events are done.
     const template = document.createElement("template");
     template.innerHTML = html;
+
+    // we special case <.portal> here and teleport it into our temporary DOM for recovery
+    // as we'd otherwise not find teleported forms
+    DOM.all(template.content, `[${PHX_PORTAL}]`).forEach((portalTemplate) => {
+      template.content.firstElementChild.appendChild(
+        portalTemplate.content.firstElementChild,
+      );
+    });
+
     // because we work with a template element, we must manually copy the attributes
     // otherwise the owner / target helpers don't work properly
     const rootEl = template.content.firstElementChild;
@@ -2089,7 +2100,10 @@ export default class View {
 
     const phxChange = this.binding("change");
 
-    return DOM.all(this.el, `form[${phxChange}]`)
+    return DOM.all(
+      document,
+      `#${CSS.escape(this.id)} form[${phxChange}], [${PHX_TELEPORTED_REF}="${CSS.escape(this.id)}"] form[${phxChange}]`,
+    )
       .filter((form) => form.id)
       .filter((form) => form.elements.length > 0)
       .filter(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",

package/priv/static/phoenix_live_view.cjs.js

@@ -4276,7 +4276,7 @@ var View = class _View {
     this.log(type, () => ["", clone(rawDiff)]);
     const { diff, reply, events, title } = Rendered.extract(rawDiff);
     callback({ diff, reply, events });
-    if (typeof title === "string" || type == "mount") {
+    if (typeof title === "string" || type == "mount" && this.isMain()) {
       window.requestAnimationFrame(() => dom_default.putTitle(title));
     }
   }
@@ -4538,6 +4538,11 @@ var View = class _View {
     const oldForms = this.root.formsForRecovery;
     const template = document.createElement("template");
     template.innerHTML = html;
+    dom_default.all(template.content, `[${PHX_PORTAL}]`).forEach((portalTemplate) => {
+      template.content.firstElementChild.appendChild(
+        portalTemplate.content.firstElementChild
+      );
+    });
     const rootEl = template.content.firstElementChild;
     rootEl.id = this.id;
     rootEl.setAttribute(PHX_ROOT_ID, this.root.id);
@@ -5638,7 +5643,10 @@ var View = class _View {
       return {};
     }
     const phxChange = this.binding("change");
-    return dom_default.all(this.el, `form[${phxChange}]`).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(
+    return dom_default.all(
+      document,
+      `#${CSS.escape(this.id)} form[${phxChange}], [${PHX_TELEPORTED_REF}="${CSS.escape(this.id)}"] form[${phxChange}]`
+    ).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(
       (form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore"
     ).map((form) => {
       const clonedForm = form.cloneNode(true);
@@ -5795,7 +5803,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.13";
+    return "1.1.14";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";