Sticky LiveViews failing to be patched during live navigation

[pedromvieira]

Environment

• Elixir version (elixir -v): Elixir 1.13.3
• Phoenix version (mix deps): 1.6.11
• Phoenix LiveView version (mix deps): 0.17.11
• Operating system: Ubuntu
• Browsers you attempted to reproduce this bug on (the more the merrier): Edge and Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

We have a top bar live_render inside our main layout (live_html.heex) with live components. We assign new values on each live view navigation. When sticky: false, everything is re-rendered and updated. With sticky: true, we can't assign new values to the live_component and only the "current container" liveview re-renders.

<%= live_render(@socket, LiveAdminWeb.UIMenuTopLive, id: "menuTop", session: %{ "breadcrumb" => @breadcrumb }, sticky: true ) %>

Expected behavior

After each live navigation, when we assign new values to the live_component, render only their small changes.

Maybe this is related to a recent bug fixed in 0.17.9 - Fix sticky LiveViews failing to be patched during live navigation? Changelog

This small app replicate the same issue. Sticky App

Test

Edit lib/sticky_app_web/templates/layout/live.html.heex. After initial HTTP mount. When sticky is true, only main liveview is updated and top liveview assign breadcrumb it's not. When sticky is false, all liveviews are updated and top liveview assign breadcrumb it's updated.

<%= live_render(@socket, StickyAppWeb.TopLive,
  id: "menuTop",
  session: %{
    "breadcrumb" => @breadcrumb
  },
  sticky: true
) %>

[josevalim]

Please provide a minimal app that reproduces the issue, thank you :)

[pedromvieira]

Please provide a minimal app that reproduces the issue, thank you :)

This small app replicate the same issue. Sticky App

Test

Edit lib/sticky_app_web/templates/layout/live.html.heex. After initial HTTP mount. When sticky is true, only main liveview is updated and top liveview assign breadcrumb it's not. When sticky is false, all liveviews are updated and top liveview assign breadcrumb it's updated.

<%= live_render(@socket, StickyAppWeb.TopLive,
  id: "menuTop",
  session: %{
    "breadcrumb" => @breadcrumb
  },
  sticky: true
) %>

[yasoob]

I was planning on doing something similar. Any updates on this? :)

[SteffenDE]

I don't think that this is a bug. The sticky LiveView is sticky and therefore stays the same when navigating. The fact that the breadcrumb assign changes does not bother the LV as the session is not supposed to change after the initial render. How would the LV get the new session data when only the mount callback has access to it?

I think you'll need to use something like Phoenix.PubSub to send updates to the sticky LiveView. The idea is to set a unique key in the session that is passed to the parent LV, pass this to the sticky LV and there subscribe on a PubSub topic. The parent LiveViews then send a message to this topic when the breadcrumbs change.

[josevalim]

Thank you @SteffenDE for looking into this!