fix: navigate callback running after patch

[enewbury]

Fixes issue #2615

Previous behavior

If you navigate from one live view to another, and that liveview immediately does a patch redirect, the navigate will override the patch because it runs its browser history pushes in a browser animation frame that runs on the next repaint.

What changed

This change simply checks if the linkRef has changed by the time the animation frame runs, and if it has, we don't need to run the browser updates. We still call the "onDone" from the withPageLoading wrapper to make sure the events get fired successfully.

Image shows that it directs from second page directly to home with the query param set

Test script

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.0"},
  # {:phoenix_live_view, "~> 0.19.0"}
  {:phoenix_live_view, path: "../github.com/enewbury/phoenix_live_view"}
])

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}

  use Phoenix.VerifiedRoutes,
    router: Example.Router,
    endpoint: Example.Endpoint

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :value, nil)}
  end

  defp phx_vsn, do: Application.spec(:phoenix, :vsn)
  defp lv_vsn, do: Application.spec(:phoenix_live_view, :vsn)

  def render("live.html", assigns) do
    ~H"""
    <script src={"https://cdn.jsdelivr.net/npm/phoenix@#{phx_vsn()}/priv/static/phoenix.min.js"}></script>
    <script src="http://127.0.0.1:8080/phoenix_live_view.js"></script> 
    <!-- <script src={"https://cdn.jsdelivr.net/npm/phoenix_live_view@#{lv_vsn()}/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"""
    Test Param: <%= @value %>
    <br />
    <.link navigate={~p"/home/second"}>Go to Second page</.link>
    """
  end

  def handle_params(%{"test" => value}, _uri, socket) do
    {:noreply, assign(socket, :value, value)}
  end

  def handle_params(_params, _uri, socket) do
    {:noreply, push_patch(socket, to: ~p"/home?test=1")}
    # {:noreply, socket}
  end
end

defmodule Example.SecondLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  use Phoenix.VerifiedRoutes,
    router: Example.Router,
    endpoint: Example.Endpoint

  defp phx_vsn, do: Application.spec(:phoenix, :vsn)
  defp lv_vsn, do: Application.spec(:phoenix_live_view, :vsn)

  def render("live.html", assigns) do
    ~H"""
    <script src={"https://cdn.jsdelivr.net/npm/phoenix@#{phx_vsn()}/priv/static/phoenix.min.js"}></script>
    <script src="http://127.0.0.1:8080/phoenix_live_view.js"></script> 
    <!-- <script src={"https://cdn.jsdelivr.net/npm/phoenix_live_view@#{lv_vsn()}/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 navigate={~p"/home"}>Home</.link>
    """
  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("/home", HomeLive, :index)
    live("/home/second", SecondLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)

  plug(Plug.Parsers,
    parsers: [:urlencoded, :multipart, :json],
    pass: ["*/*"],
    json_decoder: Phoenix.json_library()
  )

  plug(Example.Router)
end

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

[enewbury]

alternate approach...would it be possible to not call commitPendingLink on line 405 until later in the callback? Possible problems with that would be all the lines above (406-409) get run even if another navigation event is currently taking place, but not sure of a good example of what that would look like.

[enewbury]

Do we need to worry about possibly losing this scroll position if we don't run this?

[chrismccord]

This looks great! Can you undo your priv build changes? We don't accept PRs artifacts for security reasons. Thanks!

[enewbury]

This looks great! Can you undo your priv build changes? We don't accept PRs artifacts for security reasons. Thanks!

Done!

[chrismccord]

you're my hero! ❤️❤️❤️🐥🔥