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.
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")}
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
