Phoenix component invalid slot entry error

Phoenix Forum Questions / Help
1

Hello friends, I have a phoenix component that supports 2 slots, but I get this error:

invalid slot entry <:before_title_block>. A slot entry must be a direct child of a component

I have read this post What does "A slot entry must be a direct child of a component" mean?

Component:

  attr(:id, :string, required: true)
  attr(:title, :string, required: true)
  attr(:title_class, :string, required: false, default: "w-full font-bold select-none my-4")
  slot(:inner_block, required: true)
  slot(:before_title_block)

  @spec aside_accordion(map) :: Phoenix.LiveView.Rendered.t()
  def aside_accordion(%{title: title} = assigns) do
    assigns = assign(assigns, title_alias: String.replace(title, " ", "-"))

    ~H"""
    <section class="flex flex-col w-full mx-auto">
      <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
        <span><%= render_slot(@before_title_block) %></span>
        <span class={@title_class}><%= @title %>:</span>
        <span>
          <Heroicons.chevron_double_up
            class={"#{@title_alias}-up w-4 h-auto cursor-pointer"}
            phx-click={
              JS.toggle()
              |> JS.show(to: ".#{@title_alias}-down")
              |> JS.hide(to: ".#{@id}-#{@title_alias}-content")
            }
          />
        </span>
      </div>

      <div class={"#{@id}-#{@title_alias}-content flex flex-col pt-2 duration-200 w-full"}>
        <%= render_slot(@inner_block) %>
      </div>
    </section>
    """
  end
end

And how I load this:

<Aside.aside_accordion
  id={"text-#{@id}"}
  title="Tab Settings"
  title_class="my-4 w-full text-center font-bold select-none text-lg"
>
  <div class="flex flex-col w-full pb-5 gap-4">
    <:before_title_block>
      <Heroicons.plus_small class="w-5 h-5" />
    </:before_title_block>
    <%= for %{id: key, data: data} <- sorted_list(@element["order"], @element["children"]) do %>
      ...
    <% end %>
  </div>
</Aside.aside_accordion>

Thank you in advance

2

For fixing this error it should be like this:

        <Aside.aside_accordion
          id={"text-#{@id}"}
          title="Tab Settings"
          title_class="my-4 w-full text-center font-bold select-none text-lg"
        >
          <:before_title_block>
            <Heroicons.plus class="w-5 h-5" phx-click="add" phx-target={@myself} />
          </:before_title_block>
          <div class="flex flex-col w-full pb-5 gap-4">

Move the slot out of any div or etc

2 Likes