Hi all!

I have a LiveComponent living inside a modal. This component lists some items and let me add a new one with a form.
I render the LiveComponent in this way

<%= live_component @socket, TestProjectWeb.ProceedingLive.TaskComponent, id: "tasks-#{@proceeding.id}", proceeding_id: @proceeding.id %>

Here is my component template (is not complete, but I have problems with both the button and the form)

<button class="btn btn-warning btn-fab btn-round" data-toggle="modal" data-target="#exampleModal" >
    <i class="material-icons">list</i>
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Tareas</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="d-flex flex-row">
            <%= if not @show_add_task do %>
              <div class="p-2">
                  <button class="btn btn-info btn-round" phx-click="show_add_task" phx-target="<%= @myself %>">
                  Añadir <i class="material-icons">add</i>
                  </button>
              </div>
            <% end %>
        </div>
        <div class="row">
          <div class="col-md-12 col-lg-12">
              <%= f = form_for @changeset, "#", id: "task-form", phx_submit: "add_task", phx_target: @myself %>
                <div class="form-row">
                  <div class="col-md-9 col-lg-9">
                    <div class="form-group">
                      <label class="control-label" for="task_description">Descripción</label>
                      <%= text_input f, :description, class: "form-control"%>
                    </div>
                  </div>
                  <div class="col-md-3 col-lg-3">
                    <div class="form-group">
                      <label class="control-label" for="task_deadline">Fecha límite</label>
                      <%= date_input f, :deadline, class: "form-control", rows: 1 %>
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <%= submit "Guardar", class: "btn btn-primary btn-round", phx_disable_with: "Guardando..." %>
                  </div>
                </div>
              </form>
          </div>
        </div>

The problem is if I click either the submit button or the add button my modal disappears. I’ve added some logs on the way, and events arrive at the expected handle_event functions, but I’m not sure if I’m messing the state at some point so my template can not be rendered.
Here is my LiveComponent code

defmodule TestProjectWeb.ProceedingLive.TaskComponent do
  use TestProjectWeb, :live_component

  alias TestProject.Accounts
  alias TestProject.Proceedings
  alias TestProject.Proceedings.Task

  @impl true
  def update(assigns, socket) do
    socket = socket |> assign(assigns) |> assign(:tasks, Proceedings.get_tasks_by_proceeding(assigns.proceeding_id))
    {:ok, socket}
  end

  @impl true
  def mount(socket) do
    changeset = Proceedings.change_task(%Task{})
    socket = assign(
      socket,
      show_add_task: false,
      tasks: [],
      changeset: changeset
    )
    {:ok, socket}
  end

  @impl true
  def handle_event("show_add_task", value, socket) do
    :timer.sleep(4000)
    socket = assign(socket, show_add_task: true)
    {:noreply, socket}
  end

  @impl true
  def handle_event("add_task", %{"task" => task} = _params, socket) do
    user = Accounts.get_user_by_session_token(socket.assigns.user_token)
    attrs = task
      |> Map.put_new("user_id", user.id)
      |> Map.put_new("proceeding_id", socket.assigns.proceeding_id)

    case Proceedings.create_task(attrs) do
      {:ok, _client} ->
        socket = assign(
          socket,
          show_add_task: false,
          tasks: [],
          changeset: Proceedings.change_task(%Task{}))
        socket = assign(socket, show_add_task: false)
        {:noreply, socket}

      {:error, %Ecto.Changeset{} = changeset} ->
        socket = assign(
          socket,
          show_note_form: false,
          note_changeset: changeset)
        {:noreply, socket}
    end
  end
end

This is the template rendered

image1964×630 44.9 KB

image2596×518 35.3 KB

Thanks in advance!