Environment

• Elixir version (elixir -v): Elixir 1.19.3 (compiled with Erlang/OTP 26)
• Phoenix version (mix deps): {:phoenix, "~> 1.8.6"}
• Operating system: Mac M4

Actual behavior

New projects are born with those flashes for connection issues and server crashes:

      <.flash
        id="client-error"
        kind={:error}
        title={gettext("We can't find the internet")}
        phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")}
        phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})}
        hidden
      >...</.flash>

      <.flash
        id="client-error"
        kind={:error}
        title={gettext("We can't find the internet")}
        phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")}
        phx-connected={hide("#server-error") |> JS.set_attribute({"hidden", ""})}
        hidden
      >...</flash>

When you trigger a client side error (say liveSocket.disconnect() both flash messages appear because |> JS.remove_attribute("hidden") is inside both phx-disconnected bindings so it doesnt respect whats in the main LiveView container just like show uses a match of selectors to show the correct error.

Ive reproduced in this repo and here's the commit with a simple fix: lubien/phoenix-bug-report-client-error-flash@f6fb4be

In that case I've added |> JS.remove_attribute("hidden", to: ".phx-XXXX-error #client-error") but Im happy to hear suggestions and Im also happy to contribute with a PR too :)

I've originally noticed this behavior by looking at https://comunidade.devsnorte.com/ when socket disconnected for real and went investigate. I didnt patch my website yet in case you want a live example.

Expected behavior

When the error is client side only, only display #client-error