[LiveComponent] No redirect after submission

[splyy]

Hello,

I have a strange problem with the LiveComponent module.

I use LiveComponent in a modal, to render a form (quick add) and update a user list directly when closing this modal :

{# templates/list_user.html.twig #}
<div class="modal-body">
    {{ component('add_user') }}
</div>

{# templates/modal_user.html.twig #}
<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            'data-action': 'live#action',
            'data-action-name': 'prevent|save',
        }
    }) }}

    {{ form_row(form.email }}
    {{ form_row(form.lastName) }}
    {{ form_row(form.firstName) }}

    <button class="btn btn-primary">Créer</button>

    {{ form_end(form) }}
</div>

And my component simply create user, send an email and then redirects to the listing

#[AsLiveComponent(
    name: 'add_user',
    template: 'modal_user.html.twig'
)]
class UserAddComponent extends AbstractController
{
    use ComponentWithFormTrait;
    use DefaultActionTrait;

    public function __construct(
        private readonly TokenGeneratorInterface $tokenGenerator,
        private readonly EventDispatcherInterface $eventDispatcher,
    ) {
    }

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

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

        $data = $this->getFormInstance()->getData();
        $user = new DoctrineAdminSP($data['email'], $data['firstName'], $data['lastName']);

        $entityManager->persist($user);
        $entityManager->flush();

        // DispatchEvent to send Email

        return $this->redirectToRoute('user_list');
    }
}

When creating a User, on my local machine, everything works as intented and the list is reloaded without a hitch. In the profiler, I got 2 traces:

• [POST] /_components/add_user/save
• [GET] /_components/add_user/list

The problem occurs on my staging server environment. When the form is submitted, the user is created (since we find the save action in the profiler) but it stops there. The 2nd action is not performed and on the site we find ourselves with a "black overlay" as if a second modal was opened:

And when inspecting the code:

No errors in the console. No errors in the profiler/network. No additional information.

Does anyone have any ideas? Could the problem be a JS conflict? Or should I just abandon the idea of using LiveComponent for my modal?

EDIT :

There is my config for SymfonyUX :

// controllers.json
{
    "controllers": {
        "@symfony/ux-live-component": {
            "typed": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "@symfony/ux-live-component/styles/live.css": true
                }
            }
        },
        "@symfony/ux-turbo": {
            "turbo-core": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

// boostrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(
  require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/,
  ),
);

[xaviermarchegay]

@splyy Something about https://github.com/symfony/ux/issues/543 ? Maybe a header is missing.

[splyy]

@xaviermarchegay

I update the LiveComponentSub,scriber from vendors based on your PR, and thanks to this modification I reproduce the problem on my local machine :thinking:

However, when I look at the response in the profiler, i got this :

Which makes me think that the JS changes might not have any impact as I have application/vnd.live-component+html.

EDIT :

I require 2.x-dev from composer (instead of tags). I try it on my staging environment !

[splyy]

Thanks @xaviermarchegay your PR resolve the problem :+1:

waiting new tag :eyes: