Ensure __changed__ is reset when using dynamic assigns (#3933)

To fully disable change tracking, we need to force `__changed__` to nil.

Closes #3931.

Author: SteffenDE

lib/phoenix_live_view/engine.ex

@@ -815,7 +815,11 @@ defmodule Phoenix.LiveView.Engine do
         quote do: %{unquote_splicing(static)}
 
       true ->
-        quote do: Map.merge(unquote(dynamic), %{unquote_splicing(static)})
+        # we must disable change tracking when there is a non empty dynamic part
+        # (for example `<.my_component {assigns}>`) for anything inside the component;
+        # in case the parent assigns already contain a `__changed__` key, we must reset
+        # it to `nil` to do so
+        quote do: Map.merge(unquote(dynamic), %{unquote_splicing([__changed__: nil] ++ static)})
     end
   end
 

test/e2e/support/issues/issue_3931.ex

@@ -0,0 +1,41 @@
+defmodule Phoenix.LiveViewTest.E2E.Issue3931Live do
+  use Phoenix.LiveView
+
+  def mount(_params, _session, socket) do
+    socket =
+      socket
+      |> assign_async(:slow_data, fn ->
+        Process.sleep(100)
+        {:ok, %{slow_data: "This was loaded asynchronously!"}}
+      end)
+
+    {:ok, socket}
+  end
+
+  def layout(assigns) do
+    ~H"""
+    <div class="max-w-4xl mx-auto p-8">
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
+
+  def render(assigns) do
+    ~H"""
+    <.layout {assigns}>
+      <.async_result :let={data} assign={@slow_data}>
+        <:loading>
+          <div id="async" class="flex items-center space-x-3">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            <p class="text-gray-600">Loading data...</p>
+          </div>
+        </:loading>
+
+        <div id="async" class="space-y-3">
+          {data}
+        </div>
+      </.async_result>
+    </.layout>
+    """
+  end
+end

test/e2e/test_helper.exs

@@ -197,6 +197,7 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
       live "/3814", Issue3814Live
       live "/3819", Issue3819Live
       live "/3919", Issue3919Live
+      live "/3931", Issue3931Live
     end
   end
 

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

@@ -0,0 +1,34 @@
+import { test, expect } from "../../test-fixtures";
+import { syncLV } from "../../utils";
+
+// https://github.com/phoenixframework/phoenix_live_view/issues/3931
+test("dynamic attributes reset __changed__ and properly re-render", async ({
+  page,
+}) => {
+  let webSocketEvents = [];
+  page.on("websocket", (ws) => {
+    ws.on("framesent", (event) =>
+      webSocketEvents.push({ type: "sent", payload: event.payload }),
+    );
+    ws.on("framereceived", (event) =>
+      webSocketEvents.push({ type: "received", payload: event.payload }),
+    );
+    ws.on("close", () => webSocketEvents.push({ type: "close" }));
+  });
+
+  await page.goto("/issues/3931");
+  await syncLV(page);
+
+  // it should be updated asynchronously
+  await expect(page.locator("#async")).toContainText(
+    "This was loaded asynchronously!",
+  );
+
+  expect(webSocketEvents).toEqual(
+    expect.arrayContaining([
+      { type: "sent", payload: expect.stringContaining("phx_join") },
+      { type: "received", payload: expect.stringContaining("phx_reply") },
+      { type: "received", payload: expect.stringContaining("diff") },
+    ]),
+  );
+});