ignore events for elements that are not connected (#4074)

Closes #4066.

Author: SteffenDE

assets/js/phoenix_live_view/live_socket.js

@@ -531,6 +531,11 @@ export default class LiveSocket {
       // in that case we DO NOT want to fallback to the main element
       view = this.getViewByEl(viewEl);
     } else {
+      if (!childEl.isConnected) {
+        // if the element is not part of the DOM any more
+        // there's no owner and we should not do fall back
+        return null;
+      }
       view = this.main;
     }
     return view && callback ? callback(view) : view;

test/e2e/support/issues/issue_4066.ex

@@ -0,0 +1,47 @@
+defmodule Phoenix.LiveViewTest.E2E.Issue4066Live do
+  use Phoenix.LiveView, layout: {__MODULE__, :live}
+
+  alias Phoenix.LiveViewTest.E2E.Issue4066Live
+
+  def mount(params, _session, socket) do
+    {:ok, assign(socket, delay: params["delay"] || 3000, render_lc: true)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <p id="render-time">{DateTime.utc_now()}</p>
+    <button phx-click="toggle">Toggle</button>
+    <.live_component :if={@render_lc} id="foo" delay={@delay} module={Issue4066Live.LiveComponent} />
+    """
+  end
+
+  def handle_event("toggle", _params, socket) do
+    {:noreply, assign(socket, :render_lc, !socket.assigns.render_lc)}
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.Issue4066Live.LiveComponent do
+  use Phoenix.LiveComponent
+
+  def render(assigns) do
+    ~H"""
+    <script :type={Phoenix.LiveView.ColocatedHook} name=".MyHook">
+      export default {
+        mounted() {
+          this.el.addEventListener("input", () => {
+            setTimeout(() => {
+              this.pushEventTo(this.el, "do-something", { value: 100 })
+              this.liveSocket.js().setAttribute(document.body, "data-pushed", "yes");
+            }, parseInt(this.el.dataset.delay));
+          })
+        }
+      }
+    </script>
+    <input phx-hook=".MyHook" data-delay={@delay} target={@myself} id={@id} />
+    """
+  end
+
+  def handle_event("do-something", %{"value" => value}, socket) do
+    {:noreply, socket}
+  end
+end

test/e2e/test_helper.exs

@@ -42,6 +42,7 @@ defmodule Phoenix.LiveViewTest.E2E.Layout do
     {assigns[:pre_script]}
     <script type="module">
       import {LiveSocket} from "/assets/phoenix_live_view/phoenix_live_view.esm.js"
+      import {hooks as colocatedHooks} from "/assets/colocated/index.js";
 
       let Hooks = {}
       Hooks.FormHook = {
@@ -57,7 +58,7 @@ defmodule Phoenix.LiveViewTest.E2E.Layout do
       let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
       let liveSocket = new LiveSocket("/live", window.Phoenix.Socket, {
         params: {_csrf_token: csrfToken},
-        hooks: {...Hooks, ...window.hooks}
+        hooks: {...Hooks, ...window.hooks, ...colocatedHooks}
       })
       liveSocket.connect()
       window.liveSocket = liveSocket
@@ -201,6 +202,7 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
       live "/3953", Issue3953Live
       live "/3979", Issue3979Live
       live "/4027", Issue4027Live
+      live "/4066", Issue4066Live
     end
   end
 

test/e2e/tests/issues/4066.spec.js

@@ -0,0 +1,31 @@
+import { test, expect } from "../../test-fixtures";
+import { syncLV } from "../../utils";
+
+// https://github.com/phoenixframework/phoenix_live_view/issues/4066
+test("events for disconnected elements are ignored", async ({ page }) => {
+  // The test triggers an input event that triggers an event after a delay
+  // and before the delay fires, the element is removed by a button press.
+  // Previously, the event would bubble to the parent, crashing the LiveView.
+  await page.goto("/issues/4066?delay=100");
+  await syncLV(page);
+
+  const renderTime = await page
+    .locator("#render-time")
+    .evaluate((el) => el.innerText);
+
+  await page.locator("input").fill("123");
+  await page.locator("button").click();
+  await syncLV(page);
+  await expect(page.locator("input")).toBeHidden();
+
+  // The hook sets this attribute when the delay fires - we should not crash here
+  await expect(page.locator("body")).toHaveAttribute("data-pushed", "yes");
+
+  // We can show the input again
+  await page.locator("button").click();
+  await syncLV(page);
+  await expect(page.locator("input")).toBeVisible();
+
+  // LiveView did not remount
+  await expect(page.locator("#render-time")).toHaveText(renderTime);
+});