How to Toggle Phoenix Modal Component show/hide

Phoenix Forum Questions / Help
,
1

Phoenix 1.7 generator comes with a modal in “CoreComponents”.
The instructions do not explain how to toggle it.

The base syntax is:

  <.modal
  id="user-modal"
  show >

The show attribute is what triggers the popup.

In JavaScript ,to trigger a modal you typically have a boolean to toggle the “show” attribute value. In Elixir I have no idea how to do that nor do I know if that is the approach that is expected of the developer to make it work.

The documentation is here:

      <.modal id="confirm-modal">
        Are you sure?
        <:confirm>OK</:confirm>
        <:cancel>Cancel</:cancel>
      </.modal>

  JS commands may be passed to the `:on_cancel` and `on_confirm` attributes
  for the caller to react to each button press, for example:

      <.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
        Are you sure you?
        <:confirm>OK</:confirm>
        <:cancel>Cancel</:cancel>
      </.modal>

The example does not explicitly show the show attribute, In the working example below from the phoenix generator, it is used.


<.modal
  :if={@live_action in [:new, :edit]}
  id="user-modal"
  show
  on_cancel={JS.navigate(~p"/users")}
>

<.live_component
    module={AppxWeb.UserLive.FormComponent}
    id={@user.id || :new}
    title={@page_title}
    action={@live_action}
    user={@user}
    patch={~p"/users"}
  />
</.modal>
2

Bind the show attribute to a flag, ‘show_modal’

Then you can use a LiveView handle_event function that responds to a phx-update event, and updates a boolean show_modal flag.

You can set the default value if the show_modal flag when you mount

3

I have no idea what a “flag” is.

When I search I get this:
https://hexdocs.pm/fun_with_flags/FunWithFlags.html

EDIT:

I found this:

Feature flags, or feature toggles, are boolean values associated to a name . They should be used to control whether some application feature is enabled or disabled, and they are meant to be modified at runtime while an application is running. This is usually done by the people who control the application.

4

Usually it just means a Boolean variable. That’s how I use it. So wax on, wax off kind of deal


# In your LiveView module

defmodule MyApp.MyLiveView do
  use Phoenix.LiveView

  # Initialize show_modal to false
  def mount(_params, _session, socket) do
    {:ok, assign(socket, show_modal: false)}
  end

  # Handle the phx-update event to toggle show_modal
  def handle_event("toggle_modal", _params, socket) do
    {:noreply, assign(socket, show_modal: !socket.assigns.show_modal)}
  end
end
5

Do you have a remedial example?
Every time I search for any of this stuff I get a giant jungle of text and nothing is clear and simple.

I searched for an example and I got some persons entire repository:

6

How do I assign the event handler to the modal so it works?

edit, ignore comment above:

What I meant to say is, after I attached the event handler to a button, how do I bind all this to the modal?

I understand how to use assigns to set variables. The main problem I am having is I don’t know how to toggle the state of the actual modal.

7

For anyone asking the same question it’s two lines of code and requires JavaScript. I spent a day and a half going in circles over this nonsense. It has nothing to do with the show command. The show/hide feature pertains to the ID assignment and that it needs the JS module.




  <.modal
    id="user-modal"
    >
  </.modal>


<button phx-click={show_modal("user-modal")}>  Click me </button>
2 Likes
8

I saw that you solved your problem, but I was already writing an answer for you. I’ll leave it here in case this example works for someone else.

A function show_modal/2 is also defined in CoreComponents, the only thing you need to pass to this function is the id of your modal. In this function, JS commands are used to display the modal and apply some transitions to it.

So you just need to define the id of your modal:

<.modal
    :for={user <- @users}
    id={"delete-modal-#{user.id}"}
    on_confirm={
      JS.push("delete-user", value: %{id: user.id})
      |> hide_modal("delete-modal-#{user.id}")
      |> hide("#user-#{user.id}")
    }
>
  Are you sure you want to delete "<%= user.name %>"?
  <:cancel>Cancel</:cancel>
  <:confirm>Delete</:confirm>
</.modal>

and call that function:

<.link
  id={"delete-user-#{user.id}"}
  phx-click={show_modal("delete-modal-#{user.id}")}
>
1 Like
9

I totally understand it can be frustrating and I know it’s not likely your intention, but let’s not take it out on the project and its contributors. What might seem like “nonsense” when you’re frustrated usually begins to make a lot of sense with a little bit of curiosity, patience, and experience. For example…

… following the show attribute could have gotten you to those two lines of code much sooner. If you look at the function that defines the modal in the CoreComponents module, you’ll see the how the boolean show attribute acts as a flag for the show_modal/1 function that takes an @id as an argument and wraps the Phoenix.LiveView.JS.show/2 function among other JS commands.

# CoreComponents
  attr :show, :boolean, default: false
  ...
  def modal(assigns) do
    ~H"""
    <div
      id={@id}
      phx-mounted={@show && show_modal(@id)}
      ...
    >
      ...
    """
  end
  ...
  def show_modal(js \\ %JS{}, id) when is_binary(id) do
    js
    |> JS.show(to: "#{id}")
    |> JS.show(
      to: "#{id}-bg",
      transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
    )
    |> show("#{id}-container")
    |> JS.add_class("overflow-hidden", to: "body")
    |> JS.focus_first(to: "#{id}-content")
  end
1 Like
10

3 posts were split to a new topic: Posts from ‘How to Toggle Phoenix Modal Component show/hide’ thread