Alpine: Cannot uncheck checkboxes with pre-set values

[mokhosh]

First I thought it has to do with Livewire, but after a lot of head scratching I checked Alpine without Livewire and the problem is still there.

Created a pen to demonstrate the problem. As you can see unchecked checkboxes can be checked and unchecked, but the ones that are set on load cannot:

https://codepen.io/mokhosh/pen/rNLVmvq

[HugoDF]

The issue in your case is that the "value" is "2", "3" but in your array you've got 2, 3 (as numbers).

1. If you switch to <div x-data="{ categories: ['2', '3'] }"> it fixes the issue. See https://codepen.io/hugodf/pen/ZEOGKMM?editors=1111

2. Alternatively you can use x-model.number="categories" (x-model .number modifier) to fix it on the binding side. See https://codepen.io/hugodf/pen/KKMpmBQ?editors=1111.

However, there might be an underlying bug here, since the checkboxes are being set to checked (despite the type mismatch) but they're not updating (due to the type mismatch). The initialisation & update of the checkboxes should probably behave consistently (either always care about types or never do).

[SimoTod]

Alternatively, if you need to use integer, you also need to add the number modifier to x-model (which would also fox the pen) otherwise you will end up with mismatching items

[mokhosh]

Thank you guys so much.

However, there might be an underlying bug here, since the checkboxes are being set to checked (despite the type mismatch) but they're not updating (due to the type mismatch). The initialisation & update of the checkboxes should probably behave consistently (either always care about types or never do).

@HugoDF Yes, that was the strange part.

[HugoDF]

Thank you guys so much.

However, there might be an underlying bug here, since the checkboxes are being set to checked (despite the type mismatch) but they're not updating (due to the type mismatch). The initialisation & update of the checkboxes should probably behave consistently (either always care about types or never do).

@HugoDF Yes, that was the strange part.

Created a PR to fix the inconsistency 😄

[mokhosh]

You guys are super awesome