How to update :page_title after a live_patch but not before?

Phoenix Forum Questions / Help
,
1

I have an app where the user can navigate from the Main Index to a Board via live_patch passing the board ID:

<%= for board <- @board_list do %>
        <div class="flex">
          <div class="py-4 px-4">
            <div>
              <%= live_patch board.name,
                    to: Routes.live_path(@socket, __MODULE__, board: board.id),
                    class: "text-purple-700 hover:underline" %>
            </div>

Then handle_params picks up the change, adjusts the view, and changes the :page_title

def handle_params(params, _url, socket) do
  socket =
    case params do
      %{"board" => board_id} ->
        socket
        |> assign(nav: :board)
        |> ...
        |> assign(page_title: Boards.get_name(board_id))

      %{} ->
        ...
    end

  {:noreply, socket}
end

I expected this to create a proper browser history to track the user’s navigation, and to an extent, it does: When the user clicks the back button, it returns them to the appropriate page. However, the page titles in the history are wrong.

If the user went from

Main Index → Board 1 → Main Index → Board 2

Then the browser history will show

Board 1 → Main Index → Board 2

And the current page title will be “Board 2”.

My hypothesis is that the browser sees the updated page title BEFORE the “navigation” happens, so the back button correctly leads to the previous parameters, but shows the current page title.

Is there a workaround for this where the browser will not see the new page title until AFTER live_patch has sent the params and “navigation” is finished?

Thanks in advance!

2

Where are you setting the :page_title for Main Index?

I have tested your scenario in one app and couldn’t reproduce it.

3

Here is the full code

When a link is clicked in the template (separate file), it uses live_patch to update the URL with a board value or a post value. Then handle_params calls the appropriate helper: post_helper if we are clicking on a post, or board_helper if we are clicking on a board. There is also main_helper for loading the main index. :page_title is set inside the helpers.

4

I’ve recorded your scenario

If the user went from

Main Index → Board 1 → Main Index → Board 2

Then the browser history will show

Board 1 → Main Index → Board 2

And the current page title will be “Board 2”.

phxbb

Everything works as it should from my point of view. Can you check again?

5

Yes, the functionality is working. However, if you right-click the back-button in the browser to see the page history, you will notice that the titles do not match up with the pages.

6

I’ve right-clicked the back button and everything looks alright. All the urls have the proper matching page titles (same as can be seen in my gif).

Here’s also the history.

phxbb
phxbb732Ă—73 10.3 KB

7

Here’s the back button right clicked screenshot. Maybe I’m missing something.

phxbb_back_button
phxbb_back_button1003Ă—765 42.3 KB

8

I’m using Google Chrome, and it’s not working the same way. The current page_title is always accurate. But the items in the browser history are always one step ahead (i.e. the previous page has the title of the current page; two pages back has the title of one page back).

It’s good to know that some users do not experience the issue. But I need to figure out why Chrome is not working the same way.

9

I’m noticing that if you use the back-button and then the forwards-button, it overwrites the page title to be correct. But if you do not touch the forwards button, and simply open the page from scratch, click Board 1, then click Main Index, and then right-click the back button, I think you might be able to replicate the issue.

10

I was able to replicate what you’re saying with Chrome. Then I followed a similar path scenario with elixirforum.com and it’s the same issue (title & url mismatch), so I would go ahead and say it’s an issue with Chrome and not LiveView.

2 Likes