phx-viewport bindings not firing after live navigation

[SteffenDE]

Environment

• Elixir version (elixir -v): 1.14.5
• Phoenix version (mix deps): 1.7.3
• Phoenix LiveView version (mix deps): main 03ae646

Actual behavior

According to #2640 the InfiniteScroll hook should now be properly re-attached after live navigation events, but in fact it is not (using patch navigation) even using the current main branch.

Expected behavior

InfiniteScroll hook should be properly re-attached.

If you need something to reproduce, please let me know.

[SteffenDE]

Reproduction:

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.3", override: true},
  {:phoenix_live_view, "~> 0.19.1"}
])

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 mount(_params, _session, socket) do
    {:ok, assign(socket, :comp, :a)}
  end

  def handle_params(%{"comp" => comp}, _uri, socket) do
    {:noreply, assign(socket, :comp, String.to_existing_atom(comp))}
  end

  def handle_params(_params, _uri, socket), do: {:noreply, socket}

  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.3/priv/static/phoenix.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.19.1/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"""
    <.link patch={"/?comp=a"}>A</.link>
    <.link patch={"/?comp=b"}>B</.link>

    <.live_component :if={@comp == :a} module={Example.A} id="A" />
    <.live_component :if={@comp == :b} module={Example.B} id="B" />
    """
  end

  def handle_event("compA", _params, socket) do
    {:noreply, assign(socket, :comp, :a)}
  end

  def handle_event("compB", _params, socket) do
    {:noreply, assign(socket, :comp, :b)}
  end
end

defmodule Example.A do
  use Phoenix.LiveComponent

  def handle_event("bottom", _params, socket) do
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <div>
      <div id="a" phx-viewport-bottom="bottom">
        A
      </div>
    </div>
    """
  end
end

defmodule Example.B do
  use Phoenix.LiveComponent

  def render(assigns) do
    ~H"""
    <h1>B</h1>
    """
  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)
end

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

Visit http://localhost:5001, notice that the hook is attached in the DOM. Click on the link "B", then on the link "A". Notice that the hook is not attached.

[SteffenDE]

Workaround: when the phx-viewport binding is defined on the root element of the live component, it works.

In the repro:

defmodule Example.A do
  use Phoenix.LiveComponent

  def handle_event("bottom", _params, socket) do
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <div id="a" phx-viewport-bottom="bottom">
      A
    </div>
    """
  end
end

[ChristopheBelpaire]

Hello, I have the same kind of problem : here is an app that reproduce the problem https://github.com/ChristopheBelpaire/phx_viewport_bottom_bug

It is a page with two tabs, on the second tab, there is an inifinite scroll
If you change tab, the scroll won't work.
If you refresh the page it works.

defmodule PhxViewportBottomBugWeb.HomeComponent do
  use Phoenix.LiveView
  use PhxViewportBottomBugWeb, :html

  def render(assigns) do
    ~H"""
    <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
      <li class="mr-2">
        <.link patch={~p"/?tab=tab1"} aria-current="page" class={tab_selected("tab1", @tab)}>
          Tab 1
        </.link>
      </li>
      <li class="mr-2">
        <.link patch={~p"/?tab=tab2"} class={tab_selected("tab2", @tab)}>Tab 2</.link>
      </li>
    </ul>
    <%= if @tab == "tab1" do %>
      Click on Tab 2 and scroll
    <% else %>
      If you clicked on the tab, scroll won't work, if you refresh the page scroll will work
      <table class="table is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th>Id</th>
          </tr>
        </thead>
        <tbody id="items" phx-update="stream" phx-viewport-bottom="next-page">
          <tr :for={{dom_id, item} <- @streams.items} id={dom_id}>
            <td><%= item.id %></td>
          </tr>
        </tbody>
      </table>
    <% end %>
    """
  end

  defp tab_selected(tab, tab),
    do:
      "inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"

  defp tab_selected(_, _),
    do:
      "inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300"

  def mount(_params, _, socket) do
    socket = socket
    |> stream_configure(:items, dom_id: &"#{&1.id}")
    {:ok, assign(socket, :tab, "tab1")}
  end

  def handle_params(%{"tab" => "tab2"}, _path, socket) do
    socket = socket
    |> stream(:items, Enum.map(1..100, &%{id: &1}), reset: true)
    {:noreply, assign(socket, :tab, "tab2")}
  end

  def handle_params(%{"tab" => tab}, _path, socket) do
    {:noreply, assign(socket, :tab, tab)}
  end

  def handle_params(%{}, _path, socket) do
    socket = socket
    {:noreply, assign(socket, :tab, "tab1")}
  end

  def handle_event("next-page", %{"id" => id}, socket) do
    id = String.to_integer(id)
    socket = socket |> stream(:items, Enum.map(id..(id + 100), &%{id: &1}))
    {:noreply, socket}
  end
end

[ChristopheBelpaire]

@chrismccord do you think this could be merged? I have some use cases where this problem happen😇
Thanks!

[josevalim]

The best way to help is to try out the PR locally and comment if it indeed solves your issue or not.

[ChristopheBelpaire]

Hello @josevalim ,
Thanks for the quick response!
I just tested the PR on my app with the problem, and it seems the PR solve the issue :
https://github.com/ChristopheBelpaire/phx_viewport_bottom_bug