Liveview form, closing alone

Phoenix Forum Questions / Help
,
#1

I’m currently having a problem, a little annoying to solve.
Whenever I click the button to redirect to the liveview view form.
And open the window normally to be filled, but if I click on the scroll bar, then the window closes by itself.

Do you know what it can be?

index.html.leex

<%= if @live_action in [:new, :edit] do %>
  <%= live_modal @socket, ExampleWeb.ExampleOneLive.FormComponent,
    id: @example_one.id || :new,
    title: @page_title,
    action: @live_action,
    example_one: @example_one,
    return_to: Routes.example_one_index_path(@socket, :index) %>
<% end %>

            <span>
            <%= link "New", to: Routes.example_index_path(@socket, :new), class: "btn btn-block bg-gradient-primary" %>
            </span>

index.eex

  defp apply_action(socket, :new, _params, url) do
   ....
    socket
    |> assign(:page_title, "New")
    |> assign(:example_one, %ExampleOne{})
  end

live_helpers.ex

  def live_modal(socket, component, opts) do
    path = Keyword.fetch!(opts, :return_to)
    modal_opts = [id: :modal, return_to: path, component: component, opts: opts]
    live_component(socket, ExampleWeb.ModalComponent, modal_opts)
  end

modal_component.ex


  def render(assigns) do
    ~L"""
    <div id="<%= @id %>" class="phx-modal"
      phx-capture-click="close"
      phx-window-keydown="close"
      phx-key="escape"
      phx-target="#<%= @id %>"
      phx-page-loading>

      <div class="phx-modal-content">
        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
        <%= live_component @socket, @component, @opts %>
      </div>
    </div>

    <style>
    .phx-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    }
    </style>
    """
  end

  @impl true
  def handle_event("close", _, socket) do
    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
  end
#2

That is the expected behaviour… in chrome. Clicking outside of the modal will close it.

Like in this topic…

#3

As I understand it, there is no solution for this in chrome?

#4

I don’t know if it helps.
But I found that if we change the following file.

modal_component.ex

The problem is solved.

Before

  def render(assigns) do
    ~L"""
    <div id="<%= @id %>" class="phx-modal"
      phx-capture-click="close"
      phx-window-keydown="close"
      phx-key="escape"
      phx-target="#<%= @id %>"
      phx-page-loading>

      <div class="phx-modal-content">
        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
        <%= live_component @socket, @component, @opts %>
      </div>
    </div>

    <style>
    .phx-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    }
    </style>
    """
  end

after

  def render(assigns) do
    ~L"""
    <div id="<%= @id %>" class="phx-modal"
      phx-capture-click=""
      phx-window-keydown="close"
      phx-key="escape"
      phx-target="#<%= @id %>"
      phx-page-loading>

      <div class="phx-modal-content">
        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
        <%= live_component @socket, @component, @opts %>
      </div>
    </div>

    <style>
    .phx-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    }
    </style>
    """
  end
1 Like
#5

If You want to use scrollbar, it means You have a long modal…

Probably I would try to put it inside the modal, with a wrapper and some CSS styles.

Like one of fixed size, and the wrapper with overflow property set to show scrollbar. But that needs some CSS skills, and I am not a CSS specialist :slight_smile: