Hello,

I’m a total Elixir and Phoenix beginner, coming from js and react world.

I was wondering if anyone could help me solve an issue I can’t get my head around.

I’m building an admin dashboard type of project and I have the same layout (navbar and sidebar) for lots of live pages. The admin dashboard will have “Toast notifications”. So what I did is, I’ve wrote some js code to generate the toast, added it to the js hooks, and I’m triggering the toast with a “push_event” (“toast”) on a click of a button.
The toasts then appear in the root container div, that I’ve put in the “admin” layout.

The toast root lives here in the “admin_layout”:

<main class="mx-auto px-2 pt-11 lg:px-6 2xl:ml-56 overflow-auto max-h-screen">
  <.flash_group flash={@flash} />
   <%= @inner_content %>
<div id="notifications-root" phx-hook="Notifications"></div>
</main>

What I did is put all of those pages in a live_session with the same “admin_layout”;

  scope "/", Web do
    pipe_through([:browser, :require_authenticated_user])
    live_session :require_authenticated_user,
      layout: {Web.Layouts, :admin_layout},
      on_mount: [{Web.UserAuth, :ensure_authenticated}] do
      live("/users/settings", UserSettingsLive, :edit)
      live("/users/settings/confirm_email/:token", UserSettingsLive, :confirm_email)
      live("/office", OfficeLive)
    end
  end

So when I press the button and a toast appears, everything works correctly. However when I live navigate to a different admin view, for example from “summary” to “users”, the toasts dissapear and the console shows an error:

phx-F4H9jaHF_fjKQwji destroyed: the child has been removed from the parent - undefined

I don’t understand why that happens, as the root div continues living in the layout when I change the page (the layout is unchanged), but the toasts living in the root div get removed.

Is there a way to make this work correctly? Thank you for your time