[Live component] Data model binding with radio button doesn't work

[ErwannBerhault]

Hello !

I'm having a problem using live components to bind an entity to a radio button.

Context: I have a list of product variants. When I check the button, the value is stored on the back side, but uncheck the button directly.

I tested with a select and the binding works fine.

<?php
... uses
#[AsLiveComponent]
final class ProductForm extends AbstractController
{
    #[LiveProp(writable: true, url: true)]
    public ?ProductVariant $productVariant = null;
    
    ...
}

<div class="flex flex-col mb-4 gap-3">
            {% for variant in this.variants %}
                <div>
                    <input type="radio"
                           value="{{ variant.id }}"
                           data-model="productVariant"
                           id="variant_{{ variant.id }}"
                            {{ variant.getNumberOfAvailableCode == 0 ? 'disabled' : '' }}
                           class="hidden peer"
                           required
                    />
                    <label for="variant_{{ variant.id }}"
                           class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-gray-100 border border-gray-200 peer-disabled:bg-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100">
                        <span class="flex flex-col">
                            <span class="underline">{{ variant.name }}</span>
                            {{ 'products.available'|trans({"%availables%": variant.getNumberOfAvailableCode}) }}
                        </span>
                        <span class="inline-flex items-center justify-center ms-2 w-20 h-6 text-xs font-semibold bg-blue-200 rounded-full">
                            {{ variant.price }} €
                        </span>
                    </label>
                </div>
            {% endfor %}
        </div>