Level 75
See https://livewire.laravel.com/docs/wire-model#multiple-checkboxes
I have never had that happen in HTML.
1 like
Oct 18, 2023
7
Level 1
Livewire checkboxes randomly uncheck itself.
I'm building a filter system using livewire, whenever multiple checkboxes are checked, it would randomly uncheck it self.
Am using the following code:
public array $category = [];
public function getCategoriesProperty()
{
return Category::where('is_active', true)
->withCount('products')->orderBy('order')->get();
}
@foreach ($this->categories as $row)
<div class="mb-2">
<input type="checkbox" data-name="categories" wire:model="category" value="{{ $row->id }}" name="selected_categories" id="category-{{ $row->id }}">
<label for="category-{{ $row->id }}" class="text-xs font-bold font-area-extended uppercase text-black">{{ $row->name }}</label>
</div>
@endforeach
I have managed to stop the issue by adding wire:loading.attr="disabled" to the checkbox input. The only problem is it prevent users from being able to quickly click on multiple checkboxes.
It effectively disables the checkboxes until the data has loaded. Is there anyway around fixing the issue without using wire:loading.attr="disabled" ?
Level 27
Have you tried adding a key to make sure Livewire doesn’t lose track of individual elements in the loop?
@foreach ($this->categories as $row)
<div class="mb-2">
<input type="checkbox" data-name="categories" wire:key="category-{{ $row->id }}" wire:model="category" value="{{ $row->id }}" name="selected_categories" id="category-{{ $row->id }}">
<label for="category-{{ $row->id }}" class="text-xs font-bold font-area-extended uppercase text-black">{{ $row->name }}</label>
</div>
@endforeach
2 likes
Level 1
@kokoshneta Yes I have tried adding keys, didn't make a difference.
Level 24
I guess the problem is user clicking the checkbox speed is faster than the Livewire response
1 like
Level 1
@newbie360 Yes I believe that's the main cause of the problem.
Level 27
@raphael1 Ah yes, of course: when the first box is clicked, a roundtrip to Livewire is made with an array of selected and unselected boxes. When that returns and the page is updated, any changes made in the meantime will be overwritten.
The easiest way to fix it will then probably be to do wire:model.debounce.500ms (or some other value that works for you), so that Livewire doesn’t send anything back to the server until there’s a pause. Alternatively, I think you should be able to do wire:model.blur to only send the request once the user clicks on something outside the checkbox group (though I have to admit I’m not sure if the .blur functionality is intelligent enough to know that it should apply to the whole group of checkboxes, rather than each individual one).
Level 1
@kokoshneta I managed to fix the issue by creating a separate livewire component just for the filters, it sends the data using the emit event to different coomponent that handle the database query.
Please or to participate in this conversation.