neurodynamic
Radio buttons using the CoreComponents module in Phoenix 1.7
I’m trying to make a radio button selector for a public/private setting in a Phoenix 1.7 app using LiveView, and I feel like I’m missing something probably really obvious.
Schema:
field(:visibility, Ecto.Enum, values: [:public, :private], default: :private)
Relevant form .heex code:
<fieldset>
<.input field={@form[:visibility]}
id="visibility_public"
type="radio"
label="Public"
value="public"
/>
<.input field={@form[:visibility]}
id="visibility_private"
type="radio"
label="Private"
value="private"
/>
</fieldset>
At the moment, nothing takes when I click on either button. I think I probably need to set the checked attribute somehow but I haven’t been able to work out the right way to do that.
Marked As Solved
codeanpeace
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
Also Liked
neurodynamic
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.
neurodynamic
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
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








