LiveView Alpinejs Multiple checkboxes broken

Phoenix Forum Questions / Help
,
1

Hi,
I am having issue with multiple checkboxes on liveview. Am running phoenix 1.6.6 with alpinejs 3.10.4.

I have a search form with mutiple checkboxes to enable user select categories, problem is, if the liveview re-renders the checkboxes dont check themseves eventhough the x-data has then right values.

I have tried to isolate the issue:

<input type="checkbox" value="red" x-model="colors">

<input type="checkbox" value="orange" x-model="colors">

<input type="checkbox" value="yellow" x-model="colors">

Colors: <span x-text="colors"></span>

In the above markup, of liveview re-renders the page, the span will still show the right colors selected but the checkboxes will not be checked appropriately.

I already have this on my app.js:

  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to);
      }
    },
  },

Kindly assist.

2

You have not given those checkboxes name attribute.

Checkboxes that belongs together must have same name attribute!!

<form method="get">
  <input id="vehicle1" type="checkbox" name="vehicle" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>

  <input id="vehicle2" type="checkbox" name="vehicle" value="Car">
  <label for="vehicle2"> I have a car</label><br>

  <input type="checkbox" id="vehicle3" name="vehicle" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>

  <input type="submit" value="Submit">
</form>
3

Hi,
Thanks for the quick response.

<div class="" x-data="{colors:[]}">
      <input type="checkbox" value="red" name="colors" x-model="colors">
      <input type="checkbox" value="orange" name="colors" x-model="colors">
      <input type="checkbox" value="yellow" name="colors" x-model="colors">

      Colors: <span x-text="colors"></span>
  </div>

I have added name attribute, even so it still doesnt check when liveview updates.

4

I have managed to temporarily fix it by deleteing the array holding the checkboxdata and reassigning it on liveview update.
I Created a phx-hook, and on update i ran this by calling a function on the alpine store:

    const tempColors= this.colors
    delete this.colors;
    this.colors= tempColors;

This is still i think a dirty fix, i hope it will help someone.

5

LiveView is in charge of the DOM. If you want something to be true in the DOM, like whether a checkbox is checked, you need to control that from an assign. In this particular case it’d be something like:

      <input type="checkbox" value="red" name="colors" x-model="colors" <%= if @color == "red", do: "checked" %>>
      <input type="checkbox" value="orange" name="colors" x-model="colors" <%= if @color == "orange", do: "checked" %>>
      <input type="checkbox" value="yellow" name="colors" x-model="colors" <%= if @color == "yellow", do: "checked" %>>
6

Or using the newer syntax for most recent LV versions:

      <input type="checkbox" value="red" name="colors" x-model="colors" checked={@color == "red"}>
      <input type="checkbox" value="orange" name="colors" x-model="colors" checked={@color == "orange"}>
      <input type="checkbox" value="yellow" name="colors" x-model="colors" checked={@color == "yellow"}>
1 Like