Radio buttons using the CoreComponents module in Phoenix 1.7

Phoenix Forum Questions / Help
, ,
1

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.

3 Likes
2

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.

3

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

4

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.

5

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
10 Likes
6

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.

6 Likes
7

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

8

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

9

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

1 Like