Flash messages don't disappear after phx.gen.auth injected code

Phoenix Forum Questions / Help
,
1

I created a new app from scratch using mix phx.new <app> --live , then successfully added the auth layer using mix phx.gen.auth.

After I log in or log out, the flash message does not disappear nor can I click the small X button of the message to clear it. Attached is the picture after I logged in:

image
image2418×740 61.1 KB

I did not do any customization. Just out of the box a LiveView app creation with authentication added. Here are the deps in mix.exs file:

defp deps do
    [
      {:bcrypt_elixir, "~> 3.0"},
      {:phoenix, "~> 1.7.9"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.10"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 3.3"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.20.1"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.8.2"},
      {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
      {:swoosh, "~> 1.3"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:dns_cluster, "~> 0.1.1"},
      {:plug_cowboy, "~> 2.5"}
    ]
  end

Can someone please help? Thanks a lot!

2

Yea, think it’s meant that way. Somebody asked this I just found, and the answer was the same I was preparing. :slight_smile:

1 Like
3

I have the exact same thing. I’m new to Phx but I don’t think having to refresh the website is the answer. it’s the only way to clear that message. When I click I get this

dom.js:39 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#' is not a valid selector.
    at Object.all (http://localhost:4000/assets/app.js:1844:35)
    at Object.filterToEls (http://localhost:4000/assets/app.js:4126:31)
    at http://localhost:4000/assets/app.js:3924:14
    at Array.forEach (<anonymous>)
    at Object.exec (http://localhost:4000/assets/app.js:3919:16)
    at http://localhost:4000/assets/app.js:5764:24
    at http://localhost:4000/assets/app.js:5548:37
    at LiveSocket.owner (http://localhost:4000/assets/app.js:5544:9)
    at LiveSocket.withinOwners (http://localhost:4000/assets/app.js:5548:12)
    at http://localhost:4000/assets/app.js:5763:16
4

This looks like an unrelated JS error. If this is a fresh mix phx.new followed by mix phx.gen.auth with no other changes, then that’s a problem! What does your app.js look like? Could also be a change you made to core components or somewhere else.

5

No change whatever. That’s from clicking the x on the flash

1 Like
6

That’s certainly odd, but would need more info to diagnose because that should not happen. I’ve never seen it myself and I start lots of random soon-to-be-abandon Phoenix projects.

7

I think there’s an issue with flash/1 in core_components.ex that was introduced by an update in 1.7.7…1.7.8. Specifically this part:

attr :id, :string, default: nil, doc: "the optional id of flash container"
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
attr :title, :string, default: nil
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
slot :inner_block, doc: "the optional inner block that renders the flash message"

def flash(assigns) do assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)

The assign_new callback never be invoked as :id would be nil due to the attr macro specifying the default: nil. This would mean that it’s effectively given an empty string as its id attribute and breaks the closing behaviour.

One thing you can do to fix this problem in core_components.ex is to update the attr definition for :id by removing default: nil.

7 Likes
8

This is the correct answer. Remove the default. :slight_smile: it was fixed in main and we shall have a new release soon. :slight_smile:

1 Like
9

Thanks a lot @beepbeepbopbop! I confirm that removing default: nil fixes the problem of clicking the X on the flash message does not make it disappear.

10

Thank you guys. :slight_smile:

11

This thread is exactly what I needed! Thanks!