Flash message to disappear after 5 seconds?

Phoenix Forum Questions / Help
,
21

I used @sfusato solution this way

# myapp_web.ex
def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {NubacoinsWeb.Layouts, :app}

      unquote(html_helpers())
      unquote(flash_helpers()) # <- Added this line
    end
end

def flash_helpers do
    quote do
      def handle_info(:clear_flash, socket) do
        {:noreply, clear_flash(socket)}
      end
    end
end

# app.html.heex
<.flash_group phx-mount={Process.send_after(self(), :clear_flash, 3000)} flash={@flash} />

It worked so far

3 Likes
22

I’m getting undefined attribute "phx-mount" warning. Could you please share your .flash_group component?

23

I didn’t noticed i was also getting that warning:

image
image1882×121 23.6 KB

Add this line to .flash_group attrs to fix it:

  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash group" # <- Add this line to fix undefined "phx-mount" warning

image
image1151×237 24.9 KB

“phx-mount” is included in :global_prefixes

image

1 Like
24

Copy from what I wrote on bluesky.

A simple solution can be:

Putting the following on the <.flash> core component

phx-mounted={JS.dispatch("myapp:auto-clear", detail: %{timeout: 5000, attr: "phx-click"})}

and this JS in app.js

window.addEventListener("myapp:auto-clear", (e) => {
  let el = e.target;
  setTimeout(() => liveSocket.execJS(el, el.getAttribute(e.detail.attr)), e.detail.timeout);
});
10 Likes