sticky liveview can't handle event after calling push_navigate

[limeuser]

Environment

• Elixir version (elixir -v): 1.8.1
• Phoenix version (mix deps): 1.7.18
• Phoenix LiveView version (mix deps):1.0.1
• Operating system:ubuntu
• Browsers you attempted to reproduce this bug on (the more the merrier): chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:Yes

Actual behavior

i have a sticky side bar live view, it is a tree view to navigate to article live view.
reproduce the bug: https://github.com/limeuser/test.git

• mix phx.server
• open http://localhost:4000/articles/1
• click article 2, it'ok to navigate to article 2
• click article 1, can't navigate to article 1, side bar liveview can't receive event

Expected behavior

sticky live view can handle client events.

[TylerWitt]

I pulled the sample and played around with it a bit.

It sounds like the sticky argument on live_render is for when you are rendering inside of another liveview, which from what I can tell you are not doing since it is being rendered directly from the layout.

Removing the sticky option makes everything work fine.

Is there a use case for using sticky that is outside of this example?

Also, as a side note, a live view for navigation might be overkill compared to just a normal phoenix component (though I realize there is probably missing context here).

[SteffenDE]

@chrismccord I don't think we currently expect sticky LiveViews to use push_navigate. The sticky LiveView shuts down for navigation, but the client never reconnects. I'm not 100% sure what the correct behavior here should be. We could either not shutdown sticky LiveViews on the server, or ensure that we reconnect on the client.

@limeuser you can use "normal" links instead for now

diff --git a/lib/test_web/live/sidebar_live.ex b/lib/test_web/live/sidebar_live.ex
index 09e9ec0..5c76157 100644
--- a/lib/test_web/live/sidebar_live.ex
+++ b/lib/test_web/live/sidebar_live.ex
@@ -8,8 +8,8 @@ defmodule TestWeb.SidebarLive do
     ~H"""
     <div>side bar</div>
     <div class="flex flex-col">
-      <a href="#" phx-click="nav_to_article" phx-value-article_id="1" class="block">article1</a>
-      <a href="#" phx-click="nav_to_article" phx-value-article_id="2" class="block">article2</a>
+      <.link navigate={~p"/articles/1"} class="block">article1</.link>
+      <.link navigate={~p"/articles/2"} class="block">article2</.link>
     </div>
     """
   end

As @TylerWitt said, a LiveView for a navbar might be overkill, but that of course depends on the context. In most LV apps I worked with, navigation was handled as function component in the layout and we had a special "@current_route" assign that each LiveView was required to set to mark the active route.

[limeuser]

1. Is there a use case for using sticky that is outside of this example?
   The sticky LV is in app layout, it contains an article tree and a bread crumb of current article. I want the sticky LV to keep tree status and update bread crumb path when navigating between article LVs.
2. Why use push_navigate instead of normal link?
   The navbar LV need to update bread crumb path when navigating.

[limeuser]

Why the sticky LV shuts down for navigation, and the client never reconnects? The sticky LV must keep it's status, and maybe update it's status when navigating, so i can't understand the design.

[TylerWitt]

I want the sticky LV to keep tree status and update bread crumb path when navigating between article LVs.

2. Why use push_navigate instead of normal link?
   The navbar LV need to update bread crumb path when navigating.

The browser would do this for you with normal links, assuming that you are keeping the current section/breadcrumb in the path.

[limeuser]

I mean the sticky navbar LV contains a live component, it need to call send_update(cid, assigns) to update the live component when navigating to another article LV.