How are you improving the user experience with multiple selects?

Phoenix Forum Questions / Help
1

I find the multiple select default implementation in browsers to be completely unacceptable since most users do not know and find too complicated to use CTRL for multiple selections.

My question is: How is the community improving their user’s experience when using multiple selects?

For example, are you simply overriding the need for CTRL with Javascript? Are you using a Jquery plugin that makes things work a little nicer? What other solutions can you think of?

Thanks!

2

select element with multiple attribute is awful and company I work for never uses them. From more than 15 years of experience from talking to our customers, users like to have checkboxes they can check instead.

3

I agree 100% but I haven’t found a way for checkboxes to work well with Phoenix Liveview. I have also considered using something like jQuery Select2 and other such plugins to solve this issue but I imagine those won’t work well with Liveview either.

4

You can use two single selects, one lists the un-selected items, the other lists the selected items, and 2 buttons, one the select and the other to deselect.

5

That’s definitely a potential solution. I wonder if anyone has gotten check boxes working properly as well as that seems to be what users like the most.

6

what is wrong with check boxes, can you be more specific?

7

So let’s say I have the following code in my form component:

  <%= label f, :equipment_proficient_at, "What type of equipment are you proficient at operating?" %>
      <%= for equipment <- @db_equipments do %>
        <span class="whitespace-nowrap mr-8"><%= checkbox f, :equipment_proficient_at, checked_value: equipment.id, hidden_input: false,
        name: "equipment_operator_quiz[equipment_proficient_at][]" %> <%= equipment.name %></span>
      <% end %>
  <%= error_tag f, :equipment_proficient_at %>

The params sent to my component liveview when my form validates look like:

"equipment_proficient_at" => ["2", "3"]

Which is fine, except that it seems like Liveview cannot infer from the array of integers which checkboxes should be checked.

If for example you submit your form and then try to edit it, all form fields will be populated (as expected since you are editing) except the checkboxes. The checkboxes are all blank.

Does the above make sense? Thank you :slight_smile:

8

I haven’t really used those form helpers but you might be able to fix this by providing value: for checkbox helper yourself. If that doesn’t help you can always use raw HTML or tag helper.

9

Thank you very much. Can you elaborate as to how using value: would help?

Regarding your suggestion of using Raw HTML, that is fine but I imagine I will lose validation but maybe I am wrong?

Do you mind also elaborating on how the tag helper would help in this situation.

Thank you

10

I haven’t found any good documentation for either one.

My understanding is that for checkbox helper if you set value: to same as checked_value: checkbox will be checked. So you need to find if equipment_proficient_at contains the id and set it to same as checked_value if it does or let’s say empty string if it’s not in `equipment_proficient_at’. I think this is the code for it so you can check yourself phoenix_html/form.ex at v2.14.3 · phoenixframework/phoenix_html · GitHub

Here is how to use tag helper instead to create create checkbox Re-rendering a live view form causes checkbox problems · Issue #539 · phoenixframework/phoenix_live_view · GitHub

I don’t think you’ll lose validation if you use raw HTML but I haven’t yet have had any need to use form validation in my projects. It should be pretty easy for you to test by just changing that checkbox to a raw <input>

11

Thank you very much, I think I will be able to get things working with your suggestion. I will come back later in the day and update this thread once done with the implementation. :slight_smile:

12

Thank you so much for your assistance with this issue, I wanted to come back and share my final solution which is:

  <%= label f, :equipment_proficient_at, "What type of equipment are you proficient at operating?" %>
        <%= for equipment <- @db_equipments do %>
          <span class="whitespace-nowrap mr-8"><%= checkbox f, :equipment_proficient_at, checked_value: equipment.id,
            value: (if equipment.id in @off_road_truck_driver_quiz.equipment_proficient_at
                    or (Map.has_key?(@changeset.changes, :equipment_proficient_at)
                    and equipment.id in @changeset.changes.equipment_proficient_at) do equipment.id end), hidden_input: false,
            name: "off_road_truck_driver_quiz[equipment_proficient_at][]" %> <%= equipment.name %></span>
        <% end %>
  <%= error_tag f, :equipment_proficient_at %>

I’m not sure if it is the “correct” way to do things but it works. My check boxes now work properly when creating and editing objects.

1 Like
13

Hello! I have a small project GitHub - peaceful-james/invoicer: A simple Phoenix LiveView app to generate PDF invoices that generates multi-select checkboxes dynamically in LiveView that you could look at.
To see it working, select a start date some time last year and an end date some time in the future and you will see a lot of “public holiday” checkboxes are generated.
Here’s what the html.leex looks like:

<%= for possible_holiday <- Ecto.Changeset.get_field(@changeset, :possible_holidays) do %>
  <div>
    <input id="form_holiday-<%= possible_holiday.date %>"
           name="form[holiday-<%= possible_holiday.date %>]"
           type="checkbox"
           value="true"
           <%= if possible_holiday in Ecto.Changeset.get_field(@changeset, :holidays), do: "checked" %>
    >
    <label for="form_holiday-<%= possible_holiday.date %>"><%= possible_holiday.name %>
      <%= possible_holiday.date.year %>
    </label>
  </div>
<% end %>

I haven’t read this whole conversation in detail so I hope I’m not repeating information.

1 Like