add e2e test for #3194

test/e2e/test_helper.exs

@@ -80,6 +80,8 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
       live "/3026", Issue3026Live
       live "/3040", Issue3040Live
       live "/3117", Issue3117Live
+      live "/3194", Issue3194Live
+      live "/3194/other", Issue3194Live.OtherLive
     end
   end
 

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

@@ -0,0 +1,24 @@
+const { test, expect } = require("../../test-fixtures");
+const { syncLV } = require("../../utils");
+
+test("does not send event to wrong LV when submitting form with debounce blur", async ({ page }) => {
+  const logs = [];
+  page.on("console", (e) => logs.push(e.text()));
+
+  await page.goto("/issues/3194");
+  await syncLV(page);
+
+  await page.locator("input").focus();
+  await page.keyboard.type("hello");
+  await page.keyboard.press("Enter");
+  await expect(page).toHaveURL("/issues/3194/other");
+
+  // give it some time for old events to reach the new LV
+  // (this is the failure case!)
+  await page.waitForTimeout(50);
+
+  // we navigated to another LV
+  await expect(logs).toEqual(expect.arrayContaining([expect.stringMatching("destroyed: the child has been removed from the parent")]));
+  // it should not have crashed
+  await expect(logs).not.toEqual(expect.arrayContaining([expect.stringMatching("view crashed")]));
+});

test/support/e2e/issues/issue_3194.ex

@@ -0,0 +1,50 @@
+defmodule Phoenix.LiveViewTest.E2E.Issue3194Live do
+  use Phoenix.LiveView
+
+  # https://github.com/phoenixframework/phoenix_live_view/issues/3194
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, :form, to_form(%{}, as: :foo))}
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <.form
+      for={@form}
+      phx-change="validate"
+      phx-submit="submit"
+    >
+      <input
+        id={@form[:store_number].id}
+        name={@form[:store_number].name}
+        value={@form[:store_number].value}
+        type="text"
+        phx-debounce="blur"
+      />
+    </.form>
+    """
+  end
+
+  @impl Phoenix.LiveView
+  def handle_event("submit", _params, socket) do
+    {:noreply, push_navigate(socket, to: "/issues/3194/other")}
+  end
+
+  @impl Phoenix.LiveView
+  def handle_event("validate", _params, socket) do
+    {:noreply, socket}
+  end
+
+  defmodule OtherLive do
+    use Phoenix.LiveView
+
+    @impl Phoenix.LiveView
+    def render(assigns) do
+      ~H"""
+      <h2>Another LiveView</h2>
+      """
+    end
+  end
+end