`reset: true` doesn't seem to work with nested `phx-update="stream"` elements

[puruzio]

Environment

• Elixir version (elixir -v): 1.16.2
• Phoenix version (mix deps): 1.7
• Phoenix LiveView version (mix deps): 1.0.0-rc.0
• Operating system: Windows 11
• Browsers you attempted to reproduce this bug on (the more the merrier): Edge, Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

In the example app below, pressing the Update button appends data instead of replacing it. The output looks like this.

*john
 jane
*
* smith
  ashley

Expected behavior

I was expecting the output to look like the following:

* smith
  ashley

Example app

Application.put_env(:sample, Example.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7.0"},
  {:phoenix_live_view, "~> 1.0.0-rc.0", override: true}
])

defmodule Example.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule Example.HomeLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  def render("live.html", assigns) do
    ~H"""
    <script src={"https://cdn.jsdelivr.net/npm/phoenix@#{phx_vsn()}/priv/static/phoenix.min.js"}></script>
    <script src={"https://cdn.jsdelivr.net/npm/phoenix_live_view@#{lv_vsn()}/priv/static/phoenix_live_view.min.js"}></script>

    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    <style>
      * { font-size: 1.1em; }
    </style>
    <%= @inner_content %>
    """
  end

  def render(assigns) do
    ~H"""
      <div>
        <ul id="searched_notes" phx-update="stream">
          <li
            :for={{idx, note} <- @streams.searched_notes}
            class="py-2 sm:pb-2 mt-2 flex flex-col border border-t-1 border-r-0 border-l-0 border-b-0 "
            id={"dom_id-#{idx}"}
          >
            <div class="flex flex-col mt-2 ml-14">
              <div class="truncate  text-base  text-gray-900 dark:text-white">
                <.live_component
                id={"id-#{idx}"}
                module={Example.Component}
                note={note} />
              </div>
            </div>

          </li>
        </ul>

        <button phx-click="update_search" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Update
        </button>
      </div>
    """
  end

  def mount(params, _session, socket) do

    if connected?(socket) do
      IO.puts("Connected #####")
    end

    {:ok,
     socket
     |> assign_search(1)
      }
  end

  defp assign_search(socket, option) do
    searched_notes =
      if option == 1 do
      [
        %{
          id: "1234",
          text: "Group 1",
          user_online?: true,
          authors: [%{id: 1, name: "john"}, %{id: 2, name: "jane"}]
        },
        %{
          id: "12345",
          text: "Group 2",
          user_online?: false,
          authors: [%{id: 4, name: "man"}, %{id: 5, name: "woman"}]
        }

      ]
    else
      [
        %{
          id: "123456",
          text: "Group 3",
          user_online?: true,
          authors: [%{id: 4, name: "smith"}, %{id: 5, name: "ashley"}]
        }
      ]
    end

    |> IO.inspect(label: "searched_notes ################")
    socket
    |> stream(:searched_notes, searched_notes, reset: true)
  end

  def handle_event("update_search", _params, socket) do
    IO.puts("update_search")
    {:noreply,
       assign_search(socket, 2)}
  end

  defp phx_vsn, do: Application.spec(:phoenix, :vsn)
  defp lv_vsn, do: Application.spec(:phoenix_live_view, :vsn)

end

defmodule Example.Component do
  use Phoenix.LiveComponent

  def render(assigns) do
    ~H"""
    <div>
      <div class="flex flex-col" phx-update="stream" id={"id-#{@note_id}"}>
        <div  :for={{id, author} <- @streams.authors} id={id} class="truncate  text-base  text-gray-900 dark:text-white">
          <p><%= author.name %></p>
        </div>
      </div>
    </div>
    """
  end

  def update(%{:note=> note} = assigns, socket) do
    socket = socket
             |> assign(:note_id, note.id)
             |> stream(:authors, note.authors, reset: true)
    {:ok, socket}
  end
end

defmodule Example.Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", Example do
    pipe_through(:browser)

    live("/", HomeLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)
  plug(Example.Router)
  # plug Plug.Static, from: :sample, at: "/"
end

{:ok, _} = Supervisor.start_link([Example.Endpoint,  {Phoenix.PubSub, name: Example.PubSub}], strategy: :one_for_one)
Process.sleep(:infinity)

[puruzio]

The fix was moving phx-update="stream" to the div containing:for instead of the immediate parent div as the documentation led me to believe. I decided to reopen this issue in hopes that the documentation is improved to clarify it a bit more, so other people don't experience the same issue I've been pulling my hair about for so long. Thanks!

      <div class="flex flex-col"  id={"id-#{@note_id}"}>
        <div **phx-update="stream"** :for={{id, author} <- @streams.authors} id={id} class="truncate  text-base  text-gray-900 dark:text-white">
          <p><%= author.name %></p>
        </div>
      </div>

[SteffenDE]

@puruzio i didn’t test it yet, but I’m pretty sure your actual issue is that you are not using the correct dom id:

id={"dom_id-#{idx}"}

Maybe the documentation is still not clear enough about this.

The fix was moving phx-update="stream" to the div containing:for instead of the immediate parent div as the documentation led me to believe.

This will probably break the second stream in weird ways.

[SteffenDE]

Indeed, your example works as expected if you don't alter the IDs:

          <li
            :for={{idx, note} <- @streams.searched_notes}
            class="py-2 sm:pb-2 mt-2 flex flex-col border border-t-1 border-r-0$
            id={idx}
          >

There will be a more prominent warning about this in the docs, after https://github.com/phoenixframework/phoenix_live_view/pull/3265 is merged.