[Live Components] [Stimulus] Dispatch an event from stimulus to a parent Live Component: Missing #[LiveArg] arguments

[matthieumastadenis]

Hello,

I'm trying to send an event from a child stimulus controller (named UI--editable) to a parent Live Component (named User:Profile), by using the following code:

/* /src/Twig/Components/User/Profile.php: */

// ...

#[AsLiveComponent]
final class Profile extends AbstractController
{
    use DefaultActionTrait;

    #[LiveProp]
    public User $user;

    #[LiveProp]
    public array $values = [];

    public function mount(User $user): void
    {
        $currentUser = $this->getUser();
        $editionAllowed = $this->isGranted(Role::ROLE_ADMIN_USERS->value)
            || (($currentUser instanceof User) && ($currentUser->getId() === $user->getId()))
        ;

        $this->user = $user;
        $this->values = [
            [
                'label'    => 'Email',
                'value'    => $user->getEmail(),
                'editable' => false,
            ],
            [
                'label'    => 'Nom d\'utilisateur',
                'value'    => $user->getUsername(),
                'editable' => $editionAllowed,
            ],
            [
                'label'    => 'Prénom',
                'value'    => $user->getFirstname(),
                'editable' => $editionAllowed,
            ],
            [
                'label'    => 'Nom',
                'value'    => $user->getLastname(),
                'editable' => $editionAllowed,
            ],
        ];
    }

    #[LiveListener('saveUserProfileValue')]
    public function saveUserProfileValue(
        #[LiveArg] string|null $label = null,
        #[LiveArg] string|null $value = null,
    ): void {
        // ...

        return;
    }

    // ...
}

{#  /templates/components/User/Profile.html.twig: #}

<div {{ attributes }}>

    {# ... #}

    <twig:UI:ValueGrid
        liveEvent="name(User:Profile)|saveUserProfileValue"
        :values="values"
    />

    {# ... #}

</div>

{#  /templates/components/UI/ValueGrid.html.twig: #}

{% props
    values = [],
    liveEvent = null,
%}
<div{{ attributes.defaults({ class : 'valuegrid' }) }}>
    <div class="valuegrid_grid">
        {% for item in values %}
            {% set label    = item.label|default('') %}
            {% set value    = item.value|default(null) %}
            {% set editable = item.editable|default(false) %}
            <div
                class="valuegrid_item"
                {% if editable %}
                    data-controller="UI--editable"
                    data-ui--editable-label-value="label|json"
                    {% if liveEvent %}
                        data-action="UI--editable:saveEditable->live#emit"
                        data-live-event-param="{{ liveEvent }}"
                    {% endif %}
                {% endif %}
            >

                {# ... #}

            </div>
        {% endfor %}
    </div>
</div>

/* /assets/controllers/UI/editable_controller.js: */

import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    static values = {
        label: {
            type: String,
            default: null,
        },
    }

    static targets = [
        'value',
        'field',
        'input',
        'cancelButton',
        'editButton',
        'saveButton',
    ];

    save() {
        // ...

        this.dispatch('saveEditable', {
            bubbles: true,
            detail: {
                label: this.labelValue,
                value: this.inputTarget.value,
            },
        });
    }

    // ...

}

This works pretty well actually. Using PHPStorm's debugger I can see that my Profile::saveUserProfileValue() method is called as expected. The only issue being it's called without any argument, despite the use of #[LiveArg] attributes.

By inspecting the XHR request that is sent with the dev tools, I can confirm that label and value arguments are not sent to the server. The whole payload is the following:

{"props":{"user":1,"@attributes":{"id":"live-1167780402-0"},"@checksum":"bKqBE91nwvjSEzatGDEYGzRwk3CEJlbnDMMesRCHF/g="},"updated":{},"children":{"live-2799652316-0":{"fingerprint":"","tag":"div"},"live-4053631638-0":{"fingerprint":"","tag":"div"}},"args":{}}

I suspect the solution may be to use some specific naming for the arguments, so they are considered as "live". But I don't know what I should use exactly. Am I guessing right on this or do I need anything else?