Hidden checkboxes are getting unchecked in case of validation error

[chosten]

This one is quite hard to describe but you can reproduce the problem here.
As you can see in the playground, there is a required text input and a checkbox. The text input use the "defer" modifier.
Now if you empty the text input then click on the checkbox, the validation will fail because the text is required but the problem is that the checkbox does not stay checked.

What I do not understand is that it can be fixed by changing the CSS. You'll notice that the checkbox is hidden and styled using CSS. If you remove the "display: none" it works as expected.

I can work around the bug by using other means of hiding the checkbox, like opacity. But I'm worried that this bug will happen again elsewhere, and it's quite hard to detect or predict.
Can someone explain what is happening ?

[adeiming]

@squarebeard I think the problem is in realtime validation, the defer model is not suitable to be validated in the updated method, my suggestion is that the defer model is made separately as if it is validated when the form is submitted.

[chosten]

But why does it work when I change the CSS ?

[joshhanley]

@squarebeard not sure what you mean by changing the css "remove the display:none" as there is no styling on the sample you provided.

@adeiming is correct, the way Livewire works, if there is multiple updates happening on the same request (for example a field is deferred), then when Livewire runs through its update cycle, it will try to update the properties in the original order they were changed.

As you are running validateOnly it's validating the first update, which is the name text input. As that is failing validation, Livewire is returning early, and so the checkbox new value is never getting applied.

You should either make both have .defer or neither to prevent that happening. Or move the validation to another method like updatedCheck so it runs after the checkbox update has been processed, then change it to $this->validate();

Hope this helps!

[chosten]

You missed the CSS in the head but anyway that made me do another example.
And it made me realize that the problem is with my unstyled checkboxes instead. Livewire reacts as you said but the unstyled checkbox stays checked after the validation failure.

Try the example, do you notice that the two checkboxes reacts differently ?