Radio buttons using the CoreComponents module in Phoenix 1.7

Already done, but they went with making the exclusion of support explicit. Conversation is here: Adds radio input case to `input` function definition in `CoreComponents` by neurodynamic · Pull Request #5506 · phoenixframework/phoenix · GitHub

Why not put these in a PR to Phoenix? Would be great to have it in core components by default.

I also didn’t know about Ecto.Enum.dump_values before seeing this; that’s a great helper function

omg thank you both of you; this would’ve taken me forever to figure out!

For people looking at this in the future, @codeanpeace’s commit with the fix for the radio input in CoreComponents is here, and that change needs to be made before the changes in this commit will completely work.

After some digging, I got it working after realizing the checked attribute isn’t rendered by the default generic input function component and needs to be explicitly set which is what the default checkbox input function component does.
https://github.com/phoenixframework/phoenix/blob/3c5bae721a965e91c0fe61c79a6f4d78fbf3b22f/installer/templates/phx_web/components/core_components.ex#L312-L325

You can either update the generic catchall input function to render the checked attribute or preferably add a radio input function component that renders it.

While that did properly check the other radio buttons upon first click, I noticed that clicking back to the original radio button did not properly check it upon first click. This seems to be because the phx-change form validation handler compares the form params to the original resource assigned to the socket and doesn’t register that change in its response to the client.

I ended up working around this by basing the value of the checked attribute off of both the form field and form params. It needs to be both because the form params are originally empty.

checked={(@form[:visibility].value == :public) || (@form.params["visibility"] == "public")}

checked={(@form[:visibility].value == :private) || (@form.params["visibility"] == "private")}

https://github.com/codeanpeace/live_cal/commit/736b4e307391b68cd600446f30a112f9afeacab8

To clean it up a bit, I added a radio_fieldset function component that generates the necessary radio button inputs based off of the Ecto.Enum field values.

  <.radio_fieldset field={@form[:visibility]}
    options={Ecto.Enum.dump_values(Scheduling.Calendar, :visibility)}
    checked_value={@form.params["visibility"]}
  />

  def radio_fieldset(%{field: %Phoenix.HTML.FormField{}} = assigns) do
    ~H"""
    <div phx-feedback-for={@field.name}>
      <.input :for={option <- @options}
        field={@field}
        id={"#{@field.id}_#{option}"}
        type="radio"
        label={String.capitalize(option)}
        value={option}
        checked={(@checked_value == option) || (@field.value == String.to_atom(option))}
      />
    </div>
    """
  end

https://github.com/codeanpeace/live_cal/commit/11d246d11454a7a8e943685444e0b3d4cb9d3649

Ah ya, for the default you would need to also check for nil to set a default (or assign a default in the schema). So like checked={is_nil(@form[:visibility]) or @form[:visibility] == "public"}, checked={@form[:visibility] == "private"}. But ya, I just went through all of this yesterday and figured it would be fresh in mind to help but apparently it’s not, lol. I had the same “double click” problem as well though can’t explain it! Just once I had all the proper checks things started working. I did also see, though, that sometimes the value would be set to on. I’ll be looking at it again soon and can maybe report back if no one else has chimed in by then.

That doesn’t seem to have an impact as far as I can tell. With or without that, it doesn’t set the default value as I’d expect, and it also seems to take two clicks to effectively select one of the buttons. I thought maybe it was an issue with needing to store the data as a raw assigns value, so I also tried this

    assigns = assign(assigns, :visibility_is_public, assigns.form[:visibility].value == :public)

with this

checked={@visibility_is_public}

but that doesn’t seem to help either

You could make a more succinct one but yes, you need to set checked.

Something like: checked={@form[:visibility].value == "public"} and checked={@form[:visibility].value == "private"}. You could add a function head in CoreComponents for type: "radio" and abstract away some of that stuff, but this is the quick solution.