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

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

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

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.

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

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.

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.

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

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.

Thank you guys.

This thread is exactly what I needed! Thanks!