Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use push_navigate in nested liveview causes full reload #3424

Open
limeuser opened this issue Sep 14, 2024 · 1 comment
Open

use push_navigate in nested liveview causes full reload #3424

limeuser opened this issue Sep 14, 2024 · 1 comment
Labels
Milestone

Comments

@limeuser
Copy link

limeuser commented Sep 14, 2024

Environment

  • Elixir version (elixir -v): 1.17.2
  • Phoenix version (mix deps): 1.7.14
  • Phoenix LiveView version (mix deps): 1.0.0-rc.1
  • Operating system: ubuntu 20.04
  • Browsers you attempted to reproduce this bug on (the more the merrier):
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

In my application, i use nested liveview in layout to implement sidebar. In sidevar liveview, using <.link navigate> navgite to liveview is ok, but using push_navigate in click handle_event cause full reload, and liveview socket is reconnected.

app.html.heex implement sidebar as nested liveview in layout

<div>
  <%= live_render(@socket, TestliveWeb.SideBarLive, sticky: true, id: :side_bar) %>
  <%= @inner_content %>
</div>

side_bar_live.ex

  • navigate by <.link> is ok
  • navigate by click event, call push_naviagte in handle_event callback cause liveview reconnect
defmodule TestliveWeb.SideBarLive do
  use TestliveWeb, :live_view

  def render(assigns) do
    ~H"""
    <div class="flex flex-col">
      <span>sidebar</span>
      <.link navigate={~p"/articles/2/show"}>article2_link_navigate</.link>
      <a phx-click="nav_to_article" phx-value-id="2">article2_push_navigate</a>
    </div>
    """
  end

  def handle_event("nav_to_article", %{"id" => id}, socket) do
    {:noreply, socket |> push_navigate(to: ~p"/articles/#{id}/show")}
  end
end

article_live.ex

defmodule TestliveWeb.ArticleLive do
  use TestliveWeb, :live_view

  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <%= @id %>
    </div>
    """
  end

  @impl true
  def mount(%{"id" => id}, _session, socket) do
    {:ok, assign(socket, id: id)}
  end
end

main_live.ex

defmodule TestliveWeb.MainLive do
  use TestliveWeb, :live_view

  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <.link navigate={~p"/articles/1/show"}>article1</.link>
    </div>
    """
  end
end

router

 scope "/", TestliveWeb do
    pipe_through :browser
    live "/main", MainLive, :index
    live "/articles/:id/show", ArticleLive
  end

Expected behavior

  • use push_naviagte in nested liveview don't causes full reload
@SteffenDE
Copy link
Collaborator

This is fixed in #3280.

cc @chrismccord

@SteffenDE SteffenDE added the bug label Sep 15, 2024
@SteffenDE SteffenDE added this to the v1.0 milestone Sep 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants