x-bind:value on a checkbox does not work

[gdebrauwer]

Flux version

v1.1.4

Livewire version

v3.5.19

What is the problem?

If you use a flux checkbox in an alpinejs' x-for loop and bind a dynamic value to every checkbox, then that value is not used and a random string value is used instead. That is not correct

Code snippets

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
};
?>

<div x-data="{ ids: [1, 2, 3], selectedIds: [] }" class="bg-white">
    <flux:checkbox.group x-model="selectedIds">
        <template x-for="id in ids" :key="id">
            <flux:checkbox x-bind:value="id"/>
        </template>
    </flux:checkbox.group>

   <!-- When you check a checkbox, it will print a random string here instead of a selected id -->
    <p>Selected: <span x-text="selectedIds"></span></p>
</div>

How do you expect it to work?

Flux should use the value provided by the x-bind:value attribute

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@gdebrauwer Sounds similar to #571

[gdebrauwer]

That issue talks about controlling the 'checked' flux attribute. It does not talk about setting the value of flux checkbox using x-bind:value.

[jeffchown]

@gdebrauwer I was more thinking about one comment, then Caleb's response:

When testing this out, I noticed that x-bind:label on flux:checkbox doesn't work either.

then Caleb:

...because these aren't native checkboxes, Alpine doesn't pick them up as such and set .checked = from the x-binding

When looking at the flux-pro/js/checkbox.js code, I found this code block:

value: this.hasAttribute('value')
    ? this.getAttribute('value')
    : Math.random().toString(36).substring(2, 10),
label: this.hasAttribute('label')
    ? this.getAttribute('label')
    : null,

which indicates that the value attribute is seen as empty upon instantiation despite your x-bind:value, therefore it is initialized to Math.random().toString(36).substring(2, 10).

As my knowledge of the Flux js is limited, this is definitely an issue/answer that would benefit from @joshhanley 's insight.

[joshhanley]

@gdebrauwer thanks for reporting! Yeah the issue is that Flux's javascript loads before Alpine's does, so what @jeffchown found is correct, that we assign a random value to the checkbox if there isn't one at the time Flux loads. The issue will be that it doesn't change if the value on the checkbox changes (aka when Alpine boots).

[gdebrauwer]

The flux:checkbox instances are created within an alpinejs x-for, so should alpinejs not be loaded at that point 🤔

[joshhanley]

@gdebrauwer yeah, I just looked into this and I believe it's because Alpine doesn't set .value until after the element exists on the screen. But because it's a custom web element, that means that Flux's javascript for that element has already booted when it gets added to the screen. If I wrap the value getter in a queueMicrotask(), it sort of works as in it shows the correct checkbox value in selected, but then there is some other state issues happening where the checkbox won't show as checked that will need investigating properly.