recursively teleport elements (#4059)

Closes #4048.

Co-authored-by: Uku Taht <[email protected]>

Author: SteffenDE

assets/js/phoenix_live_view/dom_patch.js

@@ -121,7 +121,7 @@ export default class DOMPatch {
     // as the portal target itself could be at the end of the DOM,
     // it may not be present while morphing previous parts;
     // therefore we apply all teleports after the morphing is done+
-    const portalCallbacks = [];
+    let portalCallbacks = [];
 
     let externalFormTriggered = null;
 
@@ -488,8 +488,17 @@ export default class DOMPatch {
       }
 
       morph(targetContainer, html);
+
       // normal patch complete, teleport elements now
-      portalCallbacks.forEach((callback) => callback());
+      // and handle nested teleportation up to depth 5
+      let teleportCount = 0;
+      while (portalCallbacks.length > 0 && teleportCount < 5) {
+        const copy = portalCallbacks.slice();
+        portalCallbacks = [];
+        copy.forEach((callback) => callback());
+        teleportCount++;
+      }
+
       // check for any teleported elements that are not in the view any more
       // and remove them
       this.view.portalElementIds.forEach((id) => {

test/e2e/support/portal.ex

@@ -101,6 +101,8 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
     |> assign(:param_current, nil)
     |> assign(:count, 0)
     |> assign(:render_modal, true)
+    |> assign(:render_nested_portals, true)
+    |> assign(:nested_portal_count, 0)
     |> then(&{:ok, &1, layout: {__MODULE__, :live}})
   end
 
@@ -128,6 +130,14 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
     {:noreply, assign(socket, :render_modal, !socket.assigns.render_modal)}
   end
 
+  def handle_event("toggle_nested_portals", _params, socket) do
+    {:noreply, assign(socket, :render_nested_portals, !socket.assigns.render_nested_portals)}
+  end
+
+  def handle_event("nested_portal_click", _params, socket) do
+    {:noreply, assign(socket, :nested_portal_count, socket.assigns.nested_portal_count + 1)}
+  end
+
   @impl Phoenix.LiveView
   def render(assigns) do
     ~H"""
@@ -181,6 +191,24 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
         Hey there! {@count}
       </Phoenix.LiveViewTest.E2E.PortalTooltip.tooltip>
     </div>
+
+    <div class="border border-purple-600 mt-8 p-4">
+      <h2>Nested Portal Test</h2>
+      <.button phx-click="toggle_nested_portals">Toggle nested portals</.button>
+      <p>Nested portal count: <span id="nested-portal-count">{@nested_portal_count}</span></p>
+      <.portal :if={@render_nested_portals} id="nested-portal-source" target="#root-portal">
+        <div id="outer-portal" class="border border-blue-400 p-4 m-2">
+          <h3>Outer Portal</h3>
+          <.portal id="inner-portal-source" target="body">
+            <div id="inner-portal" class="border border-green-400 p-2 m-2">
+              <h4>Inner Portal (nested inside outer)</h4>
+              <p id="nested-portal-content">Tick count: {@count}</p>
+              <.button phx-click="nested_portal_click">Click nested portal button</.button>
+            </div>
+          </.portal>
+        </div>
+      </.portal>
+    </div>
     """
   end
 

test/e2e/tests/portal.spec.js

@@ -114,3 +114,67 @@ test("teleported hook works correctly", async ({ page }) => {
     "true",
   );
 });
+
+test("nested portals render and work correctly", async ({ page }) => {
+  await page.goto("/portal?tick=false");
+  await syncLV(page);
+
+  // Verify outer portal is teleported
+  await expect(
+    page.locator("[data-phx-teleported-src=nested-portal-source]"),
+  ).toHaveCount(1);
+  await expect(page.locator("#outer-portal")).toHaveCount(1);
+
+  // Verify inner portal is teleported
+  await expect(
+    page.locator("[data-phx-teleported-src=inner-portal-source]"),
+  ).toHaveCount(1);
+  await expect(page.locator("#inner-portal")).toHaveCount(1);
+
+  // Test that events work in nested portals
+  await expect(page.locator("#nested-portal-count")).toHaveText("0");
+  await page
+    .getByRole("button", { name: "Click nested portal button" })
+    .click();
+  await expect(page.locator("#nested-portal-count")).toHaveText("1");
+
+  // Test DOM patching works in nested portals
+  await expect(page.locator("#nested-portal-content")).toContainText(
+    "Tick count: 0",
+  );
+  await evalLV(page, "send(self(), :tick)");
+  await expect(page.locator("#nested-portal-content")).toContainText(
+    "Tick count: 1",
+  );
+});
+
+test("nested portals cleanup and re-render correctly", async ({ page }) => {
+  await page.goto("/portal?tick=false");
+  await syncLV(page);
+
+  // Verify initial state
+  await expect(page.locator("#outer-portal")).toHaveCount(1);
+  await expect(page.locator("#inner-portal")).toHaveCount(1);
+
+  // Toggle off - both portals should be removed
+  await page.getByRole("button", { name: "Toggle nested portals" }).click();
+  await expect(
+    page.locator("[data-phx-teleported-src=nested-portal-source]"),
+  ).toHaveCount(0);
+  await expect(
+    page.locator("[data-phx-teleported-src=inner-portal-source]"),
+  ).toHaveCount(0);
+  await expect(page.locator("#outer-portal")).toHaveCount(0);
+  await expect(page.locator("#inner-portal")).toHaveCount(0);
+
+  // Toggle back on - both portals should reappear with correct nesting
+  await page.getByRole("button", { name: "Toggle nested portals" }).click();
+  await expect(
+    page.locator("[data-phx-teleported-src=nested-portal-source]"),
+  ).toHaveCount(1);
+  await expect(
+    page.locator("[data-phx-teleported-src=inner-portal-source]"),
+  ).toHaveCount(1);
+  await expect(page.locator("#outer-portal")).toHaveCount(1);
+  await expect(page.locator("#inner-portal")).toHaveCount(1);
+});