Scroll position changes on stream_insert/4 when using LiveView streams

Just to rule a few things out:

1. What version of LiveView are you using? There were some bugs with streams over the past few patch releases that could be causing this.

2. What does your update function look like? Does a post contain images that are getting written to priv? When I had this issue it was because I was writing to a directory that was being picked up by Live Reload. I realize that isn’t a scroll position change but just asking in case.

I also upgrade to the latest version of LiveView (0.20.9) just now, to rule out that being the reason.

1. I was on 0.20.3. Now on 0.20.9.

2. For example to one in the live view that I included. So the update is simply a new string value for one of the fields of a post.

Ah ok, I thought you were omitting a call to a context function to brevity. hmmmmmmm not sure off the top of my head

It was sort of…

In reality I would do something like:

{:noreply, stream_insert(socket, :posts, get_post_for_feed(id))}

But in essence that’s very similar: replacing the whole post, with one field being updated to a new value.

So it also happens with in this version (removing my own database fetch to make it fully transparent). Also, not using a layout (app.html.heex).

defmodule MyAppWeb.TempLive do
  use MyAppWeb, :live_view

  def mount(_, _, socket) do
    posts = [
      %{id: 1, message: "First post"},
      %{id: 2, message: "Second post"},
      %{id: 3, message: "Third post"},
      %{id: 4, message: "Fourth post"},
      %{id: 5, message: "Fifth post"},
      %{id: 6, message: "Sixth post"},
      %{id: 7, message: "Seventh post"},
      %{id: 8, message: "Eighth post"},
      %{id: 9, message: "Ninth post"},
      %{id: 10, message: "Tenth post"}
    ]

    {:ok, stream(socket, :posts, posts)}
  end

  def render(assigns) do
    ~H"""
    <div
      id="stream"
      phx-update="stream"
      class="flex flex-col gap-10"
    >
      <%= for {dom_id, post} <- @streams.posts do %>
        <div id={dom_id}>
          <p><%= post.message %></p>
          <button phx-click="update" phx-value-id={post.id}>Click</button>
        </div>
      <% end %>
    </div>
    """
  end

  def handle_event("update", %{"id" => id}, socket) do
    {:noreply, stream_insert(socket, :posts, %{id: id, message: "Updated message"})}
  end
end

It doesn’t happen on Firefox mobile for Android… At least not for the example I have tested.

I tried your code and can’t reproduce it. What browser is it failing in for ? I’m using Chromium (Arc and I even dusted off Chrome to give it a try). I also tried in Safari.

A whole host of them both on MacOS and Windows. Tried Safari, Chrome, Edge and FireFox.

But the fact that you cannot reproduce it helps. Tomorrow morning I’m going to try to reproduce it on a newly generate LiveView app.

Mysterious.

Maybe some setting/config in my app… Or client side hook…

Very strange!

Is it actually scroll position changing or is it items getting resorted? It could be the version thing and you just need to clear your cache, though I imagine that has crossed your mind, I’m just grabbing at straws here!