Prepend not working with Alpine in Liveview

I have list of posts

 <div id="post_list" phx-update="prepend">
          <%= for post <- @post_list do  %>
         <% end %>
<% end %>

Each post is a live component with some alpine data

  def render(assigns) do
      class="w-full flex mb-5"
      x-data="{reactbutton: false, emoji: false}">

and the event that pushes the post

def handle_info({:post_created, post}, socket) do
    socket =
      |> update(:post_list, fn post_list -> [post | post_list] |> Enum.reverse() end)
    {:noreply, socket}

I am using temporary assigns on post_list.

If I use append, the post goes to the bottom of the list and everything works. If I use prepend the Alpine code never initializes, leaving the component in a broken state.



One thing I have noticed is that data-phx-components are out of order. I searched the community and docs for any clue on how to fix this and cannot find anything.

1 Like

Same here. I haven’t yet upgraded to LV 0.18, but if you have, can you please share if this issue still persists?

Another thing. To circumvent this bug, you can try appending the list item and then sort it as the first element in Alpine:

x-init="$el.parentElement.insertBefore( $el, $el.parentElement.firstChild)"