Double live_patch and URL shown in the browser

derek-zhou · April 29, 2021, 6:08am

I have a handle_params/3 clause that sends a live_patch down the socket. Assume the first path is PATH_A and the second path is PATH_B, I found the following discrepancy:

If I load PATH_A from scratch, it will patch itself to PATH_B correctly and the browser’s location bar shows PATH_B.
If something else live_patch to PATH_A, the end result is both handle_params/3 are executed and the page is rendered with the content of PATH_B, however, the url in the location bar is showing PATH_A.

I don’t think this is right. Somehow the double live_patch make the content and URL disagree: the server side is patched twice and renders the correct content but the client side patch the location only once. How do I fix or work around this?

cblavier · April 29, 2021, 6:56am

I think you should make your handle_params/3 function as lean as possible with a single responsibility: deserializing state from URL params to your socket assigns.

Can you move the piece of code that needs to transform PATH_A to PATH_B before the url is patched? (so that you can directly patch to PATH_B)

If possible, give us a real life example so we can understand why you need to rewrite PATH_A to PATH_B and what it involves

josevalim · April 29, 2021, 7:01am

This is a bug. Please isolate it in a small app and open up an issue. It should point to PATH_B.

derek-zhou · April 29, 2021, 1:35pm

Will do that within today. Thanks

derek-zhou · April 29, 2021, 6:01pm

bug filed with a minimal test case:

github.com/phoenixframework/phoenix_live_view

double live_patch will fail to update the location URL

opened 05:53PM - 29 Apr 21 UTC

closed 01:06PM - 01 May 21 UTC

derek-zhou

### Environment * Elixir version (elixir -v): 1.11.4 * Phoenix version (mix de…ps): 1.5.8 * Phoenix LiveView version (mix deps): 0.15.5 * NodeJS version (node -v):14.16.0 * NPM version (npm -v):6.14.11 * Operating system: Linux * Browsers you attempted to reproduce this bug on (the more the merrier): Firefox 88 * Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes ### Actual behavior In the test case here: https://github.com/derek-zhou/testcase The page_live.ex is: ```elixir defmodule TestcaseWeb.PageLive do use TestcaseWeb, :live_view alias Phoenix.LiveView.Socket @impl true def mount(_params, _session, socket) do {:ok, socket} end @impl true def handle_params(_params, _url, %Socket{assigns: %{live_action: :path_a}} = socket) do {:noreply, push_patch(socket, to: Routes.page_path(socket, :path_b))} end @impl true def handle_params(_param, _url, socket) do {:noreply, socket} end @impl true def render(assigns) do ~L""" <%= cond do %> <% @live_action == :index -> %> <h1>I am index!</h1> <%= live_patch "click me", to: Routes.page_path(@socket, :path_a) %> <% @live_action == :path_a -> %> <h1>I am path a!</h1> <% @live_action == :path_b -> %> <h1>I am path b!</h1> <% end %> """ end end ``` In the index page there is a link called `click me`. If I click on it it will show `:path_b` content with `:path_a` url on the location bar. If I reload the page the url will change to `:path_b` and reflect the unchanged content. ### Expected behavior There are two patches back to back, the first one being triggered by clicking the link, and the second being trigger by `push_patch` in `handle_params`. content changes correctly. The URL shall change to `path_b` following the double patch.

I can work around the issue by using a button instead of a live_patch for the first action for sure. However what I wanted to do is not horribly inefficient. handle_event or handle_params, it is roughly the same amount of work. In my case I already have a portal link, which can patch the LV depends on several factors. The portal link works as an entry point to my app, and it should be reasonable to expect the portal link work within my app as a live_patch, right?