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>
