When resetting a stream that contains the same values the LiveComponents are not reordered.

[zookzook]

Environment

• Elixir version: Elixir 1.14.3
• Phoenix version: phoenix 1.7.9
• Phoenix LiveView version: phoenix_live_view 0.20.1 and the current main branch
• Operating system: MacOS X
• Browsers you attempted to reproduce this bug on (the more the merrier): Safari, Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

When I reset a stream with stream(socket, :my_stream, values, reset: true) in handle_params or handle_event where values are the same as the previous stream but reordered AND I use LiveComponents, the LiveComponents are not reordered.

It is the same use case described in #2826 but I use LiveComponents instead of components:

defmodule StreamResetWeb.ResetStreamLive do
  use StreamResetWeb, :live_view

  import StreamResetWeb.ResetStreamLive.User

  @users [
    %{id: 1, name: "John", age: 27},
    %{id: 2, name: "Mary", age: 25},
    %{id: 3, name: "Peter", age: 30}
  ]

  def handle_params(_params, _uri, socket) do
    new_stream =
      @users
      |> Enum.shuffle()
      |> IO.inspect(label: "New stream (patch)")

    socket =
      socket
      |> stream(:users, new_stream, reset: true)

    {:noreply, socket}
  end

  def handle_event("shuffle", _, socket) do
    new_stream =
      @users
      |> Enum.shuffle()
      |> IO.inspect(label: "New stream (event)")

    socket =
      socket
      |> stream(:users, new_stream, reset: true)

    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <.button phx-click={JS.patch(~p"/reset_stream")}>
      Shuffle (patch)
    </.button>

    <.button phx-click="shuffle">
      Shuffle (event)
    </.button>

    <div class="mt-3" id="users" phx-update="stream">
      <%= for {dom_id, user} <- @streams.users do %>
        <.live_component module={StreamResetWeb.ResetStreamLive.User} id={dom_id} user={user}/>
      <% end %>
    </div>
    """
  end

end

with the LiveComponent:

defmodule StreamResetWeb.ResetStreamLive.User do
  @moduledoc false

  use StreamResetWeb, :live_component

  attr :user, :any, required: true

  def render(assigns) do
    ~H"""
    <div id={@id}>
      <span><%= @user.id%></span>&nbsp;<span><%= @user.name%></span>&nbsp;<span><%= @user.age%></span>
    </div>
    """
  end

end

Here is the example: https://github.com/zookzook/stream-reset-bug

Expected behavior

The stream has been reset.

[chrismccord]

Have you tried the fix on main from #2826? (which has not yet been released)?

[zookzook]

Yes, I tried the main branch. While this works for components it does not work for live components. I put a breakpoint at the new JS parts: onBeforeElChildrenUpdated and the result is, that the toIds array contains always a list of empty strings since the toEl.children elements don't have the id attribute.

[rmand97]

I have the same problem with live_components. Just FYI

[zookzook]

It was fixed after updating the LiveView dependency in my deps folder (using the current main branch). I close this issue. It works with LiveComponents.

[wjlee2020]

curious, has this fix been released?

[Malian]

curious, has this fix been released?

No. In the meantime, you can point the phoenix_live_view dep to this commit ddccaa6