Scroll position changes on stream_insert/4 when using LiveView streams

Phoenix Forum Questions / Help
, ,
1

When I stream_insert/4 into an existing stream on a live view, it causes the scroll position to change.

For example, in this simply live view the “update” event causes the page to scroll to the top.

defmodule MyAppWeb.TempLive do
  use MyAppWeb, :live_view
  import ...
  alias ...

  def mount(_, _, socket) do
    {:ok, stream(socket, :posts, get_post_feed())}
  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, %Post{id: id, message: "Updated message"})}
  end
end

I looked around in the TodoTrek repo (GitHub - chrismccord/todo_trek) to see if I’ve missed some client side hook for managing scroll position or something along those lines. But I didn’t find anything to explain why I get the scroll jumping while other seem to don’t.

2

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.

3

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

1 Like
4

  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.

5

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

6

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.

7

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
8

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

9

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.

1 Like
10

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…

11

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!

12

It’s the scroll position. The update is handled correctly.

13

The IDs of the post elements are also correctly updated (that is: not changed or shuffled).

14

Sooooo strange. Possibly a bug but trying it in a new app is a good idea.

1 Like
15

I found the culprit (besides myself :sweat_smile:).

I had a JavaScript mutation observer set up for preventing body scroll behind a dialog element. It was implemented poorly and apparently also messed with LiveView’s stream scroll persistence behaviour.

:eyes:

1 Like
16

Lol, hey glad you found it! Happy to have been a rubber duck :smiley:

1 Like