Multiple Checkboxes

What seems to be the problem: When i have multiple checkbox, and i click on the checkbox fast enough
the UI some checkboxes unchecked depending on the hydrating.

Steps to Reproduce: create multiple checkboxes with different models, then check each fast

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples: no

is there a way to delay hydrating when there’s still a request pending, just like wire:loading

It may be dependent on how you’re setting up your checkboxes. If you have the same data point represented in multiple checkboxes, that might be the cause of the “jumping around” behavior.

Take a look at this, it might solve your problem:

There is an issue with checkboxes and other controls in Livewire, especially if you hiding/unhiding conditionally some of them. My working solution to overcome false checking in browser is using names (not wire:model, but normal name: <input type="checkbox" name="uniqueCheckboxName" ...) alternatively setting IDs works as well. This way browser does not mixing up controls and Livewire also working more stable (no “jumping” ticks).

check boxes are used to filter data, so when i used it on something like filtering for categories i check fast enough before the request is finish. the checkboxes tick and untick depending on the request finish. the data is updated on the backend but on dirty state.

I have the same problem. Clicking fast enough you toggle the checkbox in the browser, but then the ajax requests from Livewire come back and the checkboxes get updated by Livewire. The user sees checkboxes blinking on and off.

It would help if we could wait for one Livewire sync request finishes before firing another.

Edit: Apparently this will come in the “next major version” with wire:model.defer, according to the Github roadmap.

I found a pretty stable way how to render checkboxes without having unexpected checks/unchecks:

<input type="checkbox" autocomplete="off" wire:model="selected.32871" id="rF0xfuW6cYdNrwXOBHem_32871">

The checkbox id is a composite of component ID and element ID and it works pretty stable. I am using it for row selecting in a table and switching between pages and going back to previous selection works without any problem. At least in Chrome/Firefox.