Weird LiveView behavior with native dialog element

I’m currently experiencing a very strange problem. I have a LiveView that displays a dialog (using the native <dialog> element) which allows users of my app to set up OTP.

Screenshot 2024-07-04 at 11.55.281024×1624 44.5 KB

This is my handle_event/3 callback:

def handle_event("enable_mfa", %{"confirm" => "true"} = params, socket) do
  %{"current_password" => password, "user" => user_params} = params
  user_params = Map.put(user_params, "otp_secret", socket.assigns.mfa_form_secret)
  user = socket.assigns.current_user

  case Users.enable_user_mfa(user, password, user_params) do
    {:ok, _user} ->
      socket
      |> put_flash(:info, "Two-factor authentication is now enabled for your account.")
      |> redirect(to: ~p"/settings/security")
      |> noreply()

    {:error, changeset} ->
      socket
      |> assign(mfa_form: to_form(changeset))
      |> noreply()
  end
end 

When I submit the form with invalid data and reassign it with the new changeset, the dialog suddenly closes. Additionally, the UI becomes unclickable afterward.

However, if I return noreply(socket) from the handle_event/3 callback, the dialog remains open, but it doesn’t display validation errors.

It’s very odd. If I don’t update the form assignment, this issue doesn’t occur, so it must be related to the form’s re-rendering.