Says could not generate to HTML

[Manukam]

cannot convert component LiveSelect.Component with id "test[review][0][name_review]_assignee_component" to HTML.
A component must always be returned directly as part of a LiveView template.
Any idea?

[maxmarcon]

Not without more context :)

How are you adding LiveSelect to your view/component? Can you please show me your heex template?

[maxmarcon]

maybe you're trying to add the component to the root template directly?

[Manukam]

I am adding it not to a heex template, but inside a component, and that component will be used inside a heex template. This is the component

def review_table(assigns) do
    assigns =
      assigns
      |> assign_new(:hide_header, fn _ -> false end)
      |> assign_new(:phx_target, fn _ -> nil end)
      

    ~H"""
    <% input_class = "shadow-sm text-sm rounded-lg border-gray-300 focus:border-primary-500"

    table_classes = if @hide_header, do: "", else: "border-t rounded-t-lg"

    header_visibility = if @hide_header, do: "collapse", else: "visible"
    header_classes = if @hide_header, do: "", else: "border-b"

    header_row_classes =
      "table-cell px-4 py-3 bg-slate-50 text-left text-xs font-medium text-slate-500 uppercase tracking-wider border-b"

    row_classes =
      "table-cell px-4 py-3 overflow-hidden max-w-xs whitespace-no-wrap font-medium text-sm text-slate-800 border-b align-middle" %>

    <div class={"table bg-white border-l border-r #{table_classes}"}>
      <div style={"visibility: #{header_visibility}"} class={"table-header-group #{header_classes}"}>
        <div class="table-row">
          <div class={header_row_classes}>Question</div>
          <div class={header_row_classes}>Answer</div>
          <div class={header_row_classes}>Assignee</div>
          <div class={header_row_classes}>Status</div>
        </div>
      </div>

      <div class="table-row-group">
        <%= for descriptor <- @descriptors do %>
          <%= inputs_for @form, descriptor.field, fn f -> %>
            <% review = Changeset.apply_changes(f.source) %>
            <% row_bg_color = if descriptor.critical, do: "bg-yellow-100", else: "" %>

      .................
              <!-- Assignee -->
              <div class={"w-[16%] #{row_classes}"}>
                <%= live_select(f, :assignee) %>

                <.ev_error_tag form={f} field={:assignee} />
              </div>
              <!-- Status -->
              <div class={"w-[16%] #{row_classes}"}>
                <div class="flex flex-row items-center gap-x-3">
                  <%= select(f, :status, AnswerReviewItem.statuses(), class: input_class) %>
                  <.status_icon status={review.status} />
                </div>
                <.ev_error_tag form={f} field={:status} />
              </div>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
    """
  end

[maxmarcon]

Thanks.

This is probably the reason.

The anonymous function in your inputs_for might be the problem.

Try using the variant without anonymous function: https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#inputs_for/3

[Manukam]

I changed the annonymous function to this
<%= for f <- inputs_for(@form, descriptor.field) do %>
Still gives the same error

[Manukam]

Okay, I think I figured it out! Thank you for pointing me in the right direction!

[maxmarcon]

Great! Glad you figured it out.

[Manukam]

Just to be clear, I can pass the options like this right?
<%= live_select(f, :assignee, Constants.asignee_list()) %>

[maxmarcon]

No you can't. Take look at the docs: https://hexdocs.pm/live_select/LiveSelect.html#live_select/3

<%= live_select(f, :assignee, options: Constants.asignee_list()) %>