Open
Description
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>