Value from form-associated custom element not included in form params on submit

Questions / Help
, ,
1

I’m using a custom element for duration selection. It has a few buttons that modify the value. When I inspect the params from the phx-submit event, there is no value included from the custom element. I want it to be treated as a standard text input with an integer value. How can I get its value included in the submission?

Value from form-associated custom element not being included in form params on submit

Here is the code from the render function of the live component I created that wraps the custom element:

  def render(assigns) do
    ~H"""
    <div id={@id} class="flex items-center gap-4">
      <duration-input name="duration" value={@minutes}></duration-input>
      <TimeBoxWeb.Icons.pipe class="h-5 stroke-shady-white/40" />
      <fieldset class="flex items-center gap-2">
        <%= for {name, value} <- durations() do %>
          <button
            type="button"
            class="option"
            phx-click="set_duration"
            phx-value-minutes={value}
            phx-target={@myself}
            tabindex="-1"
          >
            <%= name %>
          </button>
        <% end %>
      </fieldset>
    </div>
    """
  end
2

Have looked into this, including the client-side LiveView code for form serialization. I can replicate the undesired behavior by manually constructing a new FormData object from the form element. As expected, the duration value is not included.

Is anyone aware of form participation criteria that would prevent this from working correctly?

3

For anyone reading this, I came across the solution. My form-associated custom element was missing calls to ElementInternals.prototype.setFormValue. Since the form-associated custom element API is relatively new and unused, there is not much information available online. Here is a google doc that goes over the form participation API for event-based participation and form-associated custom elements.