I’ve added a Live Component (within a nested schema) to a form. Changing the state of the component is neither persisted to the form nor an update event is sent.

Is it because the component has focus? But then at least the form update should succeed?
What did I miss?

Will be thankful for any help or pointers what to look at
Frontend is really not my scene…

Update event:

def handle_info({:updated_params, opts}, socket) do
  changeset = Backend.Schema.Meal.changeset_quick_edit(socket.assigns.content, opts)

  changeset = %{changeset | action: @check_for_errors}
  changed = changeset.changes != %{}
  form = to_form(changeset)

  state = [
    changed?: changed,
    intolerances_as_string:
      Intolerance.to_string(Ecto.Changeset.apply_changes(changeset).intolerance,
        locale: socket.assigns.locale
      ),
    form: form
  ]
  {:noreply, socket |> assign(state)}
end

Changeset:

changeset #=> #Ecto.Changeset<
  action: nil,
  changes: %{
    intolerance: #Ecto.Changeset<
      action: :update,
      changes: %{gluten_by_variety: [:wheat, :rye, :oats]},
      errors: [],
      data: #Backend.Schema.Intolerance<>,
      valid?: true,
      ...
    >
  },
  errors: [],
  data: #Backend.Schema.Meal<>,
  valid?: true,
  ...
>

Form (simplified):

<.form
  class="text_black dark:text_zinc_800"
  for={@form}
  phx-change="validate"
  phx-submit="save"
>
  <.input class="!text-white" field={@form[:displayname]} phx-debounce="300" />
  <.inputs_for :let={intolerances} field={@form[:intolerance]}>
debounce="300" /> --%>
    <.live_component
      id="glutens"
      module={BackendWeb.Components.MultiSelectComponent}
      options={@glutens}
      locale={@locale}
      field={intolerances[:gluten_by_variety]}
    />
    <.live_component
      id="nuts"
      module={BackendWeb.Components.MultiSelectComponent}
      options={@nuts}
      locale={@locale}
      field={intolerances[:nuts_by_variety]}
    />
  </.inputs_for>
</.form>

Screenshot 2025-03-10 105515537×197 8.9 KB