[Dynamic Forms][Live Component] Rendering problem with data action and dependent field

[ag-erwan]

Hello Everyone, Here I have a drop-down menu which should, when I change the value, execute a live action and display a dependent field. So it works, it does it, but when it does, my component re-renders itself every 1 second or 500 milliseconds without stopping, why? Here is my code:

{% if form.newNomGest is defined %}
    <div class="mt-2">
        {{ form_label(form.newNomGest) }}
        {{ form_widget(form.newNomGest, {attr: {'data-action': 'live#action', 'data-live-action-param': 'changeNewGest'}}) }}
    </div>
{% endif %}
{% if form.newTextNomGest is defined %}
<div class="mt-2">
    {{ form_label(form.newTextNomGest) }}
    <div class="flex items-center">
        <div class="p-2 border-y border-l border-y-border border-l-border rounded-s">
            <twig:ux:icon name="mdi:rename" class="w-6 h-6"/>
        </div>
        {{ form_widget(form.newTextNomGest)}}
    </div>
</div>
{% endif %}

The form code

->addDependent('newNomGest', 'oldNomGest', function(DependentField $field, ?string $oldNomGest) {
    if ($oldNomGest === null) {
        return;
    }
    $tabNomGest = array_filter($this->clr->findGroupedByNomGest(), fn($listNomGest) => $listNomGest !== $oldNomGest);
    $tabNomGest = array_combine($tabNomGest, $tabNomGest);
    $tabNomGest['La personne n\'est pas dans cette liste ?'] = ['Cliquez ici pour ajouter un gestionnaire' => 'Autres choix'];
    $field->add(ChoiceType::class, [
        'label' => 'Nouveau gestionnaire',
        'placeholder' => 'Nom du nouveau gestionnaire',
        'choices' => $tabNomGest,
        'autocomplete' => true
    ]);
})
->addDependent('newTextNomGest', 'newNomGest', function(DependentField $field, ?string $newNomGest) {
    if ($newNomGest !== 'Autres choix') {
        return;
    }

    $field->add(TextType::class, [
        'label' => 'Nom du gestionnaire',
        'attr' => [
            'class' => 'form-control rounded-s-none',
            'placeholder' => 'Nom et prénom du gestionnaire',
        ]
    ]);
})

Thank you for your help

[smnandre]

Could you create a reproducer for this ?

The idea is to get the smallest repository possible in which the problem can be observed... ... so we can install & test it easily and see what is not working as expected and why.

Documentation: https://symfony.com/doc/current/contributing/code/reproducer.html

Thank you!

[ag-erwan]

Hello @smnandre , As agreed, I created a small github repo for you that you can clone. Here is the repo link https://github.com/ag-erwan/ux-bug The route to access the bug is https://127.0.0.1:8001/debug/dependent/field The bug comes from the fact that I have an optgroup and a data action in the autocomplete, don't hesitate if you have any questions I will do my best to answer them.

[smnandre]

I'm wondering, why do you need the live action ?

It works without.. as you send two actions on the same events, i guess you have a sync problem, leading to two state competing.

It may be related to the autocomplete too, as this seems to work to me for options not in the group.

[ag-erwan]

I need live action because I need to be able to know the value that was selected by the user and if the user's value is "Others" who is the only one in my project to be in an optgroup . And otherwise, the bug is there in the project that I sent you, in fact it's when you select the 'Test' value of the optgroup and it makes AJAX requests in a loop. On the other hand, when I select the other values ​​outside the optgroup it works no problem

[smnandre]

Yep i tried with your repo (that's how i know it works when there is no live_action).

I do believe there is a glitch between autocomplete and dependentfield there, so i'd say you have two short-term options:

• not use groups in your select
• not use autocomplete
• not add a live_action

I need to be able to know the value that was selected by the user

I don't know well dependant-form-field but there may be some extension point you could use here.. Or you could listen to any of the re:render event Or you could also add a "onUpdate" method..

But sadly, i think you are in a conflict zone here 😅

[ag-erwan]

Okay, I understood, in the absence of not being able to use a group what I did instead I put the <b></b> tag for the only choice where I wanted it is different from the other choices in order to avoid using optgroups.

But I think it could be interesting to look at the problem of optgroups.

Indeed, live action works with normal values ​​but not with optgroups, I don't think this is an area of ​​conflict here between dependent field and live action. I think this is more of a functionality that was not taken into account during the development of the dependent field library.

Could this potentially be a fix for a future update?

[smnandre]

The dependent field is not part of Symfony UX ... and the problem comes certainely again from TomSelect / Autocomplete, that always had troubles with LiveComponent.

[ag-erwan]

Ah yes, I understand and don't worry, I found a fallback solution to get around this problem. Thank you very much for your help. Do you need me to keep my github repository open?

[smnandre]

Oh sorry i did not saw this message, no it's good for me, and sorry if i have no better answer to provide you :|

[ag-erwan]

There is no problem, thank you for your help in any case, I will put the ticket as resolved. I did it differently as mentioned in my previous message.

Okay, I understood, in the absence of not being able to use a group what I did instead I put the tag for the only choice where I wanted it is different from the other choices in order to avoid using optgroups.

I will still leave my github repository open in case there is someone who would like to try to solve this problem