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.

[FluffyDiscord]

Yes, the I have read what is there to be read. PreRender attribute is the bane of my existence in that trait. I understand the problem, just as you described. I just can't fathom why is form submitted when I expect the component to simply run the listener code. I find this to be a bug, honestly. There was no action triggered, no form submit requested. The component should just run the listener code and re-use the last "state", especially not resubmit the damn form for no apparent reason, especially when we have our own function to handle the form. Why submit form, when theres no form? Do you see the problem? :)

This is a simplification of a real problem. I have component with form that handles adding or removing the voucher from cart. When user successfully adds the voucher by sending the form component has, form is then removed and user sees "change voucher" button instead (same component). The reproduction repository has the exact steps customer will take, and it breaks it.

You are welcome to suggest a different approach. I am still learning live components, but they more often than not feel to me like hacky solution that work only for specific stuff or in specific way, kind of anti-symfony. I do love the idea though, I love to work with them, but I keep running into these, for me, nonsense situations needing "hacks" and weird workarounds.

[FluffyDiscord]

@smnandre can this be fixed please? its spamming my console