Can't listen for JS events on <flux:checkbox />

[dennisfransen]

Flux version

v2.0.1

Livewire version

v3.5.20

Tailwind version

v4.0.7

Browser and Operating System

Chrome on macOS

What is the problem?

I tried fixing a checkbox using the hidden native input solution suggested in this issue. #341
This kind of works with with checkboxes and radio buttons.

I tried a similar solution with radio buttons. (Example 1.x) But there i ended up having to update the value with x-on:click event.
So my solution would be to do the same on a checkbox. But it seems like the <flux:checkbox /> component don't emit any events.

Sidenote

This Isn't directly related to this issue, but if this works i think that would solve my initial approach
Example 2.x have the limitation of setting a initial value from an Eloquent model. This might be a AlpineJS issue. Or it might be me, not knowing how to fix this.

Code snippets

Example 1.1 - Does work

<flux:field x-data="{ gender: 'female' }">
    <input
        id="female"
        type="radio"
        name="gender"
        value="female"
        x-model="gender"
        class="hidden"
    />
    <input
        id="male"
        type="radio"
        name="gender"
        value="male"
        x-model="gender"
        class="hidden"
    />
    <input
        id="other"
        type="radio"
        name="gender"
        value="other"
        x-model="gender"
        class="hidden"
    />

    <flux:radio.group variant="segmented" :label="__('Gender')">
        <flux:radio
            id="female"
            value="female"
            :label="__('Female')"
            x-model="gender"
            x-on:click="(e) => gender = e.target.value"
        />
        <flux:radio
            id="male"
            value="male"
            :label="__('Male')"
            x-model="gender"
            x-on:click="(e) => gender = e.target.value"
        />
        <flux:radio
            id="other"
            value="other"
            :label="__('Other')"
            x-model="gender"
            x-on:click="(e) => gender = e.target.value"
        />
    </flux:radio.group>
</flux:field>

Example 1.2

<flux:field x-data="{ gender: 'female' }">
    <input
        id="female"
        type="radio"
        name="gender"
        value="female"
        x-model="gender"
        class="hidden"
    />
    <input
        id="male"
        type="radio"
        name="gender"
        value="male"
        x-model="gender"
        class="hidden"
    />
    <input
        id="other"
        type="radio"
        name="gender"
        value="other"
        x-model="gender"
        class="hidden"
    />

    <flux:radio.group variant="segmented" :label="__('Gender')">
        <flux:radio
            id="female"
            value="female"
            :label="__('Female')"
            x-model="gender"
        />
        <flux:radio
            id="male"
            value="male"
            :label="__('Male')"
            x-model="gender"
        />
        <flux:radio
            id="other"
            value="other"
            :label="__('Other')"
            x-model="gender"
        />
    </flux:radio.group>
</flux:field>

Example 2.1 - Does work

<flux:field x-data="{ isHidden: false }">
    <div class="flex gap-2">
        <input
            class="hidden"
            id="is_hidden"
            type="checkbox"
            name="is_hidden"
            x-model="isHidden"
            x-bind:checked="isHidden"
        />
        <flux:checkbox x-model="isHidden" name="is_hidden" x-bind:checked="isHidden" />
        <flux:label>{{ __('Hidden identity') }}</flux:label>
    </div>
</flux:field>

Example: 2.2 - Doesn't work.

<flux:field x-data="{ isHidden: '{{ $user->is_hidden }}' }">
    <div class="flex gap-2">
        <input
            class="hidden"
            id="is_hidden"
            type="checkbox"
            name="is_hidden"
            x-model="isHidden"
            x-bind:checked="isHidden"
        />
        <flux:checkbox x-model="isHidden" name="is_hidden" x-bind:checked="isHidden" />
        <flux:label>{{ __('Hidden identity') }}</flux:label>
    </div>
</flux:field>

How do you expect it to work?

<flux:field x-data="{ isHidden: '{{ $user->is_hidden }}' }">
    <div class="flex gap-2">
        <input
            class="hidden"
            id="is_hidden"
            type="checkbox"
            name="is_hidden"
            x-model="isHidden"
            x-bind:checked="isHidden"
        />
        <flux:checkbox x-model="isHidden" x-bind:checked="isHidden" x-bind:change="(e) => isHidden = e.currentTarget.checked"/>
        <flux:label>{{ __('Hidden identity') }}</flux:label>
    </div>
</flux:field>

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.

[joshhanley]

@dennisfransen thanks for reporting! I'll be honest all of the code examples confused me haha and I wasn't exactly clear on what you were trying to achieve.

It seems to me that you want to ensure that a Flux checkbox and a standard checkbox are kept in sync, so that way you can use it in a normal form submit to get the checked value.

If that is the case, you can just use x-model on both of the checkboxes and it should work fine. See the code snippet below. I've removed the "hidden" class off the native checkbox for the moment, so you can see it in action.

<flux:field x-data="{ isHidden: true }">
    <div class="flex gap-2">
        <input
            class=""
            id="is_hidden"
            type="checkbox"
            name="is_hidden"
            x-model="isHidden"
        />
        <flux:checkbox x-model="isHidden"/>
        <flux:label>{{ __('Hidden identity') }}</flux:label>
    </div>
</flux:field>