What could be causing the empty `info` and `error` flash messages from `live.html.heex` to appear on my LiveView page?

[tlietz]

I am migrating my website’s index page to a LiveView. After setting the LiveView up, there are always empty info and error flash containers at the beginning of the page.

They reappear even after refreshing the browser. Clicking on the flashes does not close them.

Github repo

# live.html.heex

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

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

  <%= @inner_content %>
</main>

# router.ex

...

pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, {MyAppWeb.LayoutView, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

...

scope "/", MyAppWeb do
    pipe_through :browser

    live "/", ListsLive
  end

...

[JohnnyCurran]

It appears that you have a space character inside of the <p> tag in your rendered html. This causes the alert:empty pseudo-selector in app.css to fail, and it renders a live_flash bar with no content

What versions of Phoenix and LiveView are you using? Are you using the HEEx formatter (Can you run mix.format)?

For a quick-hack solution, you might be able to use

<%= if live_flash(@flash, :info) do %>
  <%= live_flash(@flash, :info) %>
<% end %>

For both :info and :error flash messages

In your live.html.heex

[tlietz]

Interesting, I did not notice that space at first.

I have Heex formatter setup. After running mix format, the same behavior occurs.

I’m using :pheonix ~> 1.6.11 and :phoenix_live_view ~> 0.17.11

I have tried it with live view 0.17.5 and had the same behavior.