wire:modeling checkboxes to sub-key of array adds extra "" checked item

[benborgers]

Flux version

v1.1.0

Livewire version

v3.5.17

What is the problem?

When a set of Flux checkboxes wire:modeled to someProperty.subkey, the first item in the array is "".

For example: ["", "first_selection", "second_selection"]. When nothing is selected, it's [""].

2024-12-19.at.12.32.29.mp4

Code snippets

(not Volt, sorry!)

<?php

namespace App\Livewire;

use Livewire\Component;

class Reproduction extends Component
{
    public array $notifications = [];
}

<div>
    @json($notifications)

    <flux:checkbox.group wire:model.live="notifications.subkey" label="Notifications">
        <flux:checkbox label="Push notifications" value="push" />
        <flux:checkbox label="Email" value="email" />
        <flux:checkbox label="In-app alerts" value="app" />
        <flux:checkbox label="SMS" value="sms" />
    </flux:checkbox.group>
</div>

How do you expect it to work?

If zero checkboxes are checked, the array's length should be 0; if 1 checkbox is checked, the array's length should be 1; etc.

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]

@benborgers To avoid the extra blank entry, try initializing the subkey element in your property definition or in your mount() method, e.g.:

public array $notifications = [
    'subkey' => [],
];

or

public function mount()
{
    $this->notifications['subkey'] = [];
}

[benborgers]

That works, thank you! Is binding to an undefined key undefined behavior in Livewire? Or is this a different code path that has a small bug?

[jeffchown]

You're welcome @benborgers !

To the best of my understanding, if you don't initialize an array used in a flux.*.group's wire:model, then Flux initializes it to an empty array and I suspect the extra blank element occurs during this process and/or the related serialization (though I'm sure @calebporzio @joshhanley could provide a better answer)

In my apps, I make sure I initialize all properties used in my wire:models to expected defaults to avoid any such 'auto-initializations' and their related potential side-effects.

[joshhanley]

@benborgers thanks for the report! Yeah seems like a bug in how the checkbox groups are initialised.

For future reference, this is what the Volt component would look like (basically the same, just one file) 😉

<?php

use Livewire\Volt\Component;

new class extends Component {
    public array $notifications = [];
};
?>

<div>
    <div>
        @json($notifications)

        <flux:checkbox.group wire:model.live="notifications.subkey" label="Notifications">
            <flux:checkbox label="Push notifications" value="push" />
            <flux:checkbox label="Email" value="email" />
            <flux:checkbox label="In-app alerts" value="app" />
            <flux:checkbox label="SMS" value="sms" />
        </flux:checkbox.group>
    </div>
</div>