AshPhoenix checkboxes acting wonky

My form (slightly abbreviated):

<.form
    for={@form}
    id="storefront-form"
    phx-change="validate"
    phx-submit="submit"
  >
    <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
      <div class="sm:col-span-1">
        <.input
          field={@form[:name]}
          type="text"
          label="Name"
          placeholder="Enter storefront name"
          required
        />
      </div>

      <div class="sm:col-span-1">
        <.input
          field={@form[:type]}
          type="select"
          label="Type"
          options={[{"Select type", ""}, {"Self", "self"}, {"Common", "common"}]}
          required
        />
      </div>

      <!-- This is the problematic checkbox -->
      <div class="sm:col-span-1">
        <.input
          field={@form[:published]}
          type="checkbox"
          label="Published"
        />
      </div>
    </div>
  </.form>

<.form
    for={@form}
    id="storefront-form"
    phx-change="validate"
    phx-submit="submit"
  >
    <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
      <div class="sm:col-span-1">
        <.input
          field={@form[:name]}
          type="text"
          label="Name"
          placeholder="Enter storefront name"
          required
        />
      </div>

      <div class="sm:col-span-1">
        <.input
          field={@form[:type]}
          type="select"
          label="Type"
          options={[{"Select type", ""}, {"Self", "self"}, {"Common", "common"}]}
          required
        />
      </div>

      <!-- This is the problematic checkbox -->
      <div class="sm:col-span-1">
        <.input
          field={@form[:published]}
          type="checkbox"
          label="Published"
        />
      </div>
    </div>
  </.form>

Change Handler

  @impl true
  def handle_event("validate", %{"form" => params}, socket) do
    form = AshPhoenix.Form.validate(socket.assigns.form, params)
    {:noreply, assign(socket, :form, form)}
  end

  @impl true
  def handle_event("validate", %{"form" => params}, socket) do
    form = AshPhoenix.Form.validate(socket.assigns.form, params)
    {:noreply, assign(socket, :form, form)}
  end

Form Creation (mount)

  # Create mode
  form = App.Storefronts.Storefront.form_to_create_storefront(country_id: country_id) |> to_form()

  # Edit mode  
  form = App.Storefronts.Storefront.form_to_update_storefront(storefront) |> to_form()

  # Create mode
  form = App.Storefronts.Storefront.form_to_create_storefront(country_id: country_id) |> to_form()

  # Edit mode  
  form = App.Storefronts.Storefront.form_to_update_storefront(storefront) |> to_form()

Resource Definition (Storefront)

  attribute :published, :boolean do
    allow_nil? false
    default false
    public? true
  end

  forms do
    form :create_storefront
    form :update_storefront
  end

  attribute :published, :boolean do
    allow_nil? false
    default false
    public? true
  end

  forms do
    form :create_storefront
    form :update_storefront
  end

Problem Description Issue: When user checks the "Published" checkbox and then changes the dropdown (type field), the checkbox gets unchecked automatically during form validation. Observed in logs: The checkbox value shows up as "published" => "false" in form params even when it should be checked. In general the checkbox acts super weird. Like on the create form I need to click it twice to check

Solution:

Had claude check my input components against a fresh phx.new core components and now it all works. Thank you for that (in hindsight) obvious place to look. I have been debugging like crazy lol.

Jump to solution

7 Replies

OliverOP•2w ago

Man an LLM is good at structuring a nicely condensed summary of my problem at least 😛 All newest versions of ash, ashphoenix etc I cannot find anything specific about ashphoenix and checkboxes except for in nested forms (which I am not doing)

sevenseacat•2w ago

what do the params look like when you click the checkbox? what does the input FC look like for your checkbox?

OliverOP•2w ago

FC=? ah field component

sevenseacat•2w ago

or function component

OliverOP•2w ago

ahhh yes that was actually the pointer I needed I have a bug in it! I translated from core components to tailwind ui and I messed it up meatsack bug even, not llm 😄

sevenseacat•2w ago

oops

Solution

Oliver•2w ago

Had claude check my input components against a fresh phx.new core components and now it all works. Thank you for that (in hindsight) obvious place to look. I have been debugging like crazy lol.

Gaming

Programming

AshPhoenix checkboxes acting wonky

Did you find this page helpful?