Live Component Form Update Debugging in Elixir

[rgarfield11]

The issue you're experiencing sounds related to the update lifecycle of the form within the LiveView component. When a selection is made on the first input, the form reassigns correctly but it seems that the selected value doesn't reflect on the input.

What might be happening here is that when you receive the "validate" event and you're updating the socket's state, the changeset backing your form isn't getting the selected value correctly applied. The update function in the component sets up the form as a new changeset every time, which may reset the changes in the form.

To diagnose and fix the issue, please consider the following steps:

1. Ensure selection is applied to changeset: Since validation_changeset() is not visible in the code you've provided, make sure that within that function, the selected source_type is being applied correctly to the changeset. You want to apply the params (perhaps using Ecto.Changeset.cast/4 or Ecto.Changeset.change/2) so that the changeset marks the selection as a change.

# Inside `validation_changeset()` or whichever function applies changes
changeset = validation_changeset()
          |> Ecto.Changeset.cast(params, [:source_type, :data_source_id, :issue_type_id])
# Or
changeset = validation_changeset()
          |> Ecto.Changeset.change(%{source_type: params["export"]["source_type"]})

2. Review make_form function: Ensure that make_form retains selections from the changeset when it constructs the form. The function is not shown in your question, so check that it isn't inadvertently dropping changes.

3. Double-check assigns on update: Ensure that when updating assigns, particularly when applying the :form assign, it's not overwriting the previous changes. You may need to persist the form data through reassignments or partial assigns.

# If necessary, persist the form data or incrementally change the assigns
socket = 
  socket
  |> assign(assigns)
  |> assign(:source_options, source_options)
  |> assign(:all_export_options, all_export_options)
# ...
existing_changeset = socket.assigns.form
socket =
  socket
  |> assign(:form, existing_changeset)

# If changing the form struct, keep its values but perform needed updates
socket =
  socket
  |> assign(:form, update_form(existing_changeset, params))

4. Check form fields value property: When rendering the form fields, particularly the selects, ensure that its value property is set to reflect the selected value from the changeset so that it's shown correctly in the UI.

5. Force re-render if necessary: If the above don't work, you may need to force the component to re-render. Normally, this shouldn't be necessary, but there could be circumstances where it could help. An "empty update" like socket |> noreply() after changes could be a last resort.

Finally, you may want to check your LiveView logs to ensure that the values are there and that there are no silent errors taking place when handling the events. If the problem persists, it may also be beneficial to break down the issue into smaller replicable parts or add debug statements to verify that the selections are being processed correctly at each stage.

created by ross.garfield@revelry.co using Prodops