[LiveComponent] Array of entities as model checkboxes selects correctly but does not unselect

[kilianklein]

Hi everyone!

Once again, thank you very much for these amazing bundles.

I am facing an issue that I believe to be a bug and can't seem to figure it out.

I am using the following LiveProp model:
`
/** @var Tag[] $selectedTags */

#[LiveProp(writable: true, url: true)]

public array $selectedTags = [];
`

The @var is given to the liveprop for it to understand that we are dealing with doctrine entities called Tag (very simple entity, with an id and a label).

In the template of the live component, i display all tags as checkbox as follow:

`
{% for matchedTag in matchedTags %}

            {% set checkboxId = 'tag-' ~ matchedTag.id %}

            <span>

                <input type="checkbox" id="{{ checkboxId }}" value="{{ matchedTag.id }}" data-model="selectedTags[]">

                <label for="{{ checkboxId }}">

                    {{ matchedTag.label }}

                </label>

            </span>
        {% endfor %}`

At first, I was only saving selected tag ids, but now I would like to handle entities directly because of some business-specific cases that won't fit otherwise (not important for this issue, but just in case anyone wonders why I use entities and not just their ids).
--> With only the ids, checking a checkbox, as well as unchecking both worked as expected, updating the selectedTags prop.

Now that I have added the @var annotation, and that I am remembering entities instead of just their ids, selecting a tag works by checking the checkbox, but unfortunately unselecting it does not.

After checking the profiler, I noticed that the "updated" part of the json data sent is not updated and sends the same array of selected tag ids as if the checkbox was not unchecked. When unchecking the checkbox, it shows unchecked, the live component is loading and when the request finishes, the checkbox gets checked again.

Am I doing something wrong in my usage of the checkboxes when using an array of entities, or is it some kind of a known issue?

Thanks in advance!

PS: I know that the alternative would be to not use a model at all and instead have a live action to toggle selection for a specific tag, but I would love to use the model as intended

Kilian.

[smnandre]

                <input type="checkbox" id="{{ checkboxId }}" value="{{ matchedTag.id }}" data-model="selectedTags[]">

Rename "value" into "name", and add "checked" when it's checked ;)

[kilianklein]

Thank you for your answer @smnandre,

Are you suggesting to change it to this?
<input type="checkbox" id="{{ checkboxId }}" {% if tag in selectedTags %}checked{% endif %} name="{{ tag.id }}" data-model="selectedTags[]">

I have just tried that and I am getting the following error when trying to check one of the checkboxes:

"An exception occurred while executing a query: SQLSTATE[22P02]: Invalid text representation: 7 ERROR: invalid input syntax for type integer: "on"
CONTEXT: unnamed portal parameter $1 = '...' "

PS: isn't the point of model binding not to have to write "if checked -> checked" in the template ?

[smnandre]

Oh i'm sorry i missread this.

So i think you will need to use a collectionType there and not simple checkboxes
https://symfony.com/bundles/ux-live-component/current/index.html#using-actions-to-change-your-form-collectiontype

For your tags you may use the custom hydrateWith dehydrateWith attribute properties and code this transformation ?

[kilianklein]

Hi again André,

Thanks for answering once again, and no worries, as I can see it, I am the one that probably did not explain my case well enough: I do not want to add/remove tags in a form, these checkboxes are used just as a selection widget.

My use case is the following: I have a component that lists paginated results of an entity, and displays the tags matching the result set (along with a live search query parameter).

All the tag boxes are clickable and selecting a tag filters the result set accordingly (with an AND logic when multiple tags are selected). My point is to be able to select and unselect tags that are linked to the LiveProp model. (In the UI, I use CSS to hide the checkbox and the label of such checkbox is what triggers the select/unselect behavior, so javascript is not involved).

It works well when my prop is just a simple array of IDs, but as soon as I add the @var Tag[] hint to directly deal with Tags and not have to query the database for those matching the selected IDs, the selection works, but unselecting does not (which makes me think that it is indeed a bug).

I will use a workaround for now in which I do not use model binding and just have a live action to toggle selection of each singular tag on checkbox action, but I really feel like something is not working as intended with the @var behavior (or I handled it wrong somewhere).

[smnandre]

I'd need to see all the code, i feel you mix array of scalars and many to many relations there ... or that you'd expect it to work in the same way.

I think you should use the CollectionType as you deal with entities but i may not see the overall picture