LiveView flash assigns not available in child LiveComponent

My understanding is that the combo put_flash + plug :fetch_live_flash is a convenience that will make the flash messages available in your main live view under the assign flash. In order to have it available in other liveviews/components rendered in your main liveview, you would have to pass it further along as an assign.

<%= live_component(@socket, MyAppWeb.MyLiveComponent, flash: @flash) %>

Explicitly passing @flash down through the child components does get the behavior I’m after. However, there are many layers of nested LiveComponents in my actual app and I was hoping to avoid passing flash through all of them and instead pluck it out of the socket in the specific child component that needs it.

Passing flash down as assigns is the way to go. Note, that you may want to pass it down as @parent_flash or similar as the nested components may have their own flash to display which you don’t necessary want to display on the parent.

Thanks Chris!

I was thinking about flash in more request/response lifecycle. But it sounds like every LiveView/LiveComponent will have its own flash, which would make sense. Just so I’m clear, does this mean that put_flash/2 will only set @flash for the LiveView it’s called from and not the socket in general?

This is correct. The only nuance is put_flash + redirect from a nested LV or component will be picked up by the root LV.

Stumbled on this too. In my case of a nested child component but with no redirection, an easy option is to send a message from the child component so the parent LV parent can put_flash in the handle_info.

This approach can also be abstracted out so that it doesn’t have to be repeated in every LiveView, using a helper module with on_mount/4 and attach_hook/4.

I’ve done this in the past:

defmodule MyAppWeb.LiveFlash do
  def on_mount(:default, params, _session, socket) do
    {:ok, attach_hook(socket, :flash, :handle_info, &handle_flash/2)}
  end

  def push_flash(key, msg) do
    send(self(), {:flash, key, msg}
  end

  defp handle_flash({:flash, key, msg}, socket) do
    {:halt, put_flash(socket, key, msg)}
  end

  defp handle_flash(_otherwise, socket) do
    {:cont, socket}
  end
end

Then, in my_app_web.ex:

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.Layouts, :app}

      on_mount MyAppWeb.LiveFlash

      unquote(html_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent

      import MyAppWeb.LiveFlash, only: [push_flash: 2]

      unquote(html_helpers())
    end
  end

Now calling push_flash/2 from a LiveComponent will make the parent LiveView render the flash

very cool. i’m using phoenix 1.7 RC2+ (actually git master due to bugs) so had to make a few adjustments.

live_flash.ex

defmodule AppWeb.LiveFlash do
  import Phoenix.LiveView

  def on_mount(:default, _params, _session, socket) do
    {:cont, attach_hook(socket, :flash, :handle_info, &handle_flash/2)}
  end

  def push_flash(key, msg) do
    send(self(), {:flash, key, msg})
  end

  defp handle_flash({:flash, key, msg}, socket) do
    {:halt, put_flash(socket, key, msg)}
  end

  defp handle_flash(_otherwise, socket) do
    {:cont, socket}
  end
end

app_web.ex

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {AppWeb.Layouts, :app}

      on_mount AppWeb.LiveFlash                          # add this line

      unquote(html_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent

      import AppWeb.LiveFlash, only: [push_flash: 2]     # add this line

      unquote(html_helpers())
    end
  end

very clever, thanks @jtormey

Thank you @KristerV and @jtormey for this code! I was struggling to get my Live Component to flash when there was an error. I set up this LiveFlash and it works great – except for one small problem. I can’t get the flash message to go away.

I tried using clear_flash(socket in my component when the user enters new information but that didn’t work. I also tried adding <div phx-window-keydown="clear-flash"></div> in the LiveView but that didn’t work either. I then tried phx-click="lv:clear-flash in the component form which has a phx_target={@myself} but that also did not work.

The following code is already in my live.html.heex so it seems like it should be clearing the flash message when there is a key click:

<p class="alert alert-danger" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="error"><%= live_flash(@flash, :error) %></p>

I’m running out of things to try. Could you tell me what code you use to clear the flash?

UPDATE: I think I figured it out. There is a handle_event in the LiveComponent for handling the text_input. In that handle_event, I added push_flash(:error, nil) and that clears any previous flash messages. Not sure if that is correct, but it works!

Odd that the code above in my live.html.heex file doesn’t clear the flash message when the user clicks onto the page again. I’m assuming it doesn’t work because the form text_input is in a LiveComponent so the phx_click isn’t registering.