LiveListener event is also triggering component form submit

[FluffyDiscord]

I have live component with form

<?php

#[AsLiveComponent]
class AddVoucherForm extends AbstractController
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;
    use ComponentToolsTrait;

    public bool $discountApplied = false;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(AddVoucherType::class);
    }

    public function mount(): void
    {
        $this->loadDiscountState();
    }

    #[LiveListener(GlobalTwigEvent::ORDER_CHANGED->value)]
    public function onOrderChanged(): void
    {
        $this->loadDiscountState();
    }

    #[LiveAction]
    public function remove(): void
    {
        // do stuff

        $this->emit(GlobalTwigEvent::ORDER_CHANGED->value);
    }

    #[LiveAction]
    public function save(): void
    {
        $this->submitForm();

        // do stuff

        $this->emit(GlobalTwigEvent::ORDER_CHANGED->value);

        $this->resetForm();
    }

    private function loadDiscountState(): void
    {
        $order = $this->currentOrderProvider->provide();
        $this->discountApplied = !$order->getPromotions()->isEmpty();
    }
}

Now when I trigger the remove action by clicking my button in this component

<div class="space-y-4" {{ attributes }}>
    {% if discountApplied %}
        <button 
                type="button"
                data-action="live#action"
                data-live-action-param="remove"
        >Change coupon</button>
    {% else %}
        {{ form_start(form, {
            'attr': {
                'data-action': 'live#action:prevent',
                'data-live-action-param': 'save',
            },
        }) }}
            my form stuff
            {{ form_rest(form) }}
        {{ form_end(form) }}
    {% endif %}
</div>

I can see that it correctly triggers the GlobalTwigEvent::ORDER_CHANGED event, sending it as a POST also to this component (that's fine, it has a listener for it after all), but instead of only running the listener logic, it also handles the form for some reason, getting back status code 422 because of course it's invalid, no form/fields have been submitted. This happens only when the form has been sent at least once.

I would expect it to just run the listener itself, no form submission should take place

[smnandre]

Can you clarify what components you have here (you talk "this" component vs component 1 / component 2), and also what you display the first time you renderer the component / if you have something else in its template.

As i don't see in logs when "remove" is called and when is "save"

[FluffyDiscord]

Can you clarify what components you have here (you talk "this" component vs component 1 / component 2), and also what you display the first time you renderer the component / if you have something else in its template.

As i don't see in logs when "remove" is called and when is "save"

Here reproducer, sorry for the extra folder level: https://github.com/FluffyDiscord/symfony-ux-repro/tree/master/repro

[smnandre]

Ok, so yes, this is one of those hard-to-read edge cases. You should dig directly into ComponentWithFormTrait, it's explained much better there than I could.

TL;DR: your component form was valid, but once you remove that code it's not anymore. Component forms are re-submitted for validation on the default render (when validation has already started). Since code is now null, you end up with a NotBlank constraint violation on your ComponentOne form.

Let me know if reading the code makes things clearer, or if you have any other questions.

One more thing: is this the real code, or a very simplified version? To be honest, I m not sure I understand why you have two components here, and could suggest a simplification.