Recover teleported forms

assets/js/phoenix_live_view/view.js

@@ -39,6 +39,8 @@ import {
   MAX_CHILD_JOIN_ATTEMPTS,
   PHX_LV_PID,
   PHX_NO_USAGE_TRACKING,
+  PHX_PORTAL,
+  PHX_TELEPORTED_REF,
 } from "./constants";
 
 import {
@@ -641,6 +643,13 @@ 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.appendChild(portalTemplate.content);
+    });
+
     // 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;
@@ -2109,7 +2118,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(

test/e2e/support/form_live.ex

@@ -131,6 +131,8 @@ for type <- [FormLive, FormLiveNested] do
     @impl Phoenix.LiveView
     def render(assigns) do
       ~H"""
+      <h1 :if={@params["portal"]}>Form</h1>
+
       <.my_form :if={!@params["live-component"]} params={@params} />
       <.live_component
         :if={@params["live-component"]}
@@ -143,6 +145,14 @@ for type <- [FormLive, FormLiveNested] do
       """
     end
 
+    def my_form(%{params: %{"portal" => _}} = assigns) do
+      ~H"""
+      <.portal id="form-portal" target="body">
+        <.my_form params={Map.delete(@params, "portal")} />
+      </.portal>
+      """
+    end
+
     def my_form(assigns) do
       ~H"""
       <form