DaisyUI modal in phoenix 1.8 - code example

Update: the issue with this implementation is that if you use it with a form for example, the liveview updates will rewrite the html without the open tag on the dialog HTML element, therefore closing the modal.

So here is my final solution: ditch the hook and just include the open tag from the start.

    <dialog
      id={@id}
      phx-remove={
        JS.remove_attribute("open")
        |> JS.transition({"ease-out duration-200", "opacity-100", "opacity-0"}, time: 0)
      }
      data-cancel={JS.exec(@on_cancel, "phx-remove")}
      class="modal"
      open
    >

Only available in LV 1.1+, but alternatively I believe you can use phx-mounted={JS.ignore_attributes([“open”]}).

It’s a shame the modal got removed from the core_components. I wonder if its because of this and they wanted to keep the components simple?

core_components only include what phoenix generators use. Modals in generated code eventually got replaced with separate pages, so there was no use for the modal anymore.

Very interesting! Thank you. I checked the doc and the example is actually given on a dialog

Which is a fantastic change, the modal abuse in the templates was a bit much

It seems like no matter what anyone says people expect the core components to be a full component system. Hopefully some of the various actual component systems from the community become mature enough to be strongly recommended to new users. I believe Ash has one of those component libraries in their generators now (don’t remember which).

Yesterday I was also testing Phoenix 1.8 + the DaisyUI modal and actually gave up on showModal() and such, being confused by conflicts between what I made and the flash component, which I had also earlier modified using JS hooks to make it disappear after a certain period of time.

So, I went with this purely LiveView solution – good or not. Please criticize.

  @doc """
  Renders a modal dialog.

  The `on_confirm` and `on_cancel` attributes specify the events to trigger
  when the user clicks the respective buttons or dismisses the modal (e.g.,
  pressing Escape or clicking outside).

  ## Examples
      <.link phx-click={JS.push("open", value: %{id: item.id, name: item.name})}>
        Delete
      </.link>

      <.modal :if={@modal} on_confirm="confirm" on_cancel="cancel">
        <div>Are you sure you want to delete {@modal.name}?</div>
      </.modal>
  """
  attr :on_confirm, :string, required: true, doc: "the event to trigger on confirmation"
  attr :on_cancel, :string, required: true, doc: "the event to trigger on cancellation"

  slot :inner_block, required: true, doc: "the content of the modal dialog"

  def modal(assigns) do
    ~H"""
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div
        class="bg-white p-6 rounded-xl shadow-xl w-full max-w-md"
        phx-click-away={@on_cancel}
        phx-window-keydown={@on_cancel}
        phx-key="escape"
      >
        {render_slot(@inner_block)}
        <div class="flex justify-end gap-2 mt-8">
          <.button phx-click={@on_cancel}>Cancel</.button>
          <.button phx-click={@on_confirm} variant="primary">Confirm</.button>
        </div>
      </div>
    </div>
    """
  end

and

  @impl true
  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> assign(...)
     |> assign(:modal, nil)
     |> ...}
  end

  @impl true
  def handle_event("open", %{"id" => id, "name" => name}, socket) do
    {:noreply, assign(socket, :modal, %{:id => id, :name => name})}
  end

  @impl true
  def handle_event("confirm", _, socket) do
    # skipped ...
    
    {:noreply,
     socket
     |> assign(...)
     |> assign(:modal, nil)
     |> ...
  end

  @impl true
  def handle_event("cancel", _, socket) do
    {:noreply, assign(socket, :modal, nil)}
  end
end

Yesterday, I’m afraid I wasn’t clear enough. I wanted to ask if it’s really that bad to go with a purely LiveView solution without using any JavaScript, like what I did above.

It’s fine. If you want you can combine events with local JS commands to get lower latency for the open/close. But there are legitimate circumstances in which you actually want the modal to be server-rendered. As an example, I have a piece of UI which supports an arbitrary number of stateful modals, some of which can even fetch web content and hold it in-process. This is obviously not something that can be implemented with local JS commands (or even React, interestingly).

If the latency is bothering you then you can simply render the modal into the page and toggle it with JS. There are no rules here, it’s just preference.

Thank you, @garrison !

This is my implementation:

  @doc """
  Renders a modal.

  ## Examples

      <.modal id="confirm-modal">
        This is a modal.
      </.modal>

  JS commands may be passed to the `:on_cancel` to configure
  the closing/cancel event, for example:

      <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
        This is another modal.
      </.modal>

  """
  attr :id, :string, required: true
  attr :on_cancel, JS, default: nil
  slot :inner_block, required: true

  def modal(assigns) do
    ~H"""
    <.portal id={@id} target="body">
      <dialog
        open
        closedby={if @on_cancel, do: "any", else: "none"}
        phx-mounted={
          JS.ignore_attributes("open")
          |> JS.transition({"ease-in duration-200", "opacity-0", "opacity-100"}, time: 0)
        }
        phx-remove={
          JS.remove_attribute("open")
          |> JS.transition({"ease-out duration-200", "opacity-100", "opacity-0"}, time: 0)
        }
        class="modal"
      >
        <.focus_wrap
          class="modal-box w-11/12 max-w-2xl"
          id={"#{@id}-container"}
          tabindex="0"
          phx-key="escape"
          phx-window-keydown={@on_cancel}
        >
          <form :if={@on_cancel} method="dialog">
            <button
              phx-click={@on_cancel}
              class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
            >
              ✕
            </button>
          </form>
          {render_slot(@inner_block)}
        </.focus_wrap>
        <form :if={@on_cancel} method="dialog" class="modal-backdrop">
          <button phx-click={@on_cancel}>close</button>
        </form>
      </dialog>
    </.portal>
    """
  end

Requires the LiveView > v1.1.5.