When using ux-turbo, FormInterface is unabled to detect which button is clicked #95
Description
Symfony version(s) affected: 5.3+
Description
When UX-TURBO is activated,
$form->get('submit')->isClicked is always returning false
$form->getClickedButton() is always returning null
How to reproduce
- Start a full skeleton symfony project,
- Create a controller with a form and multiple buttons
- In your controller, dump the content
$form->getClickedButton, all is working. - Install
symfony/ux-turbo - Retry, the content of
$form->getClickedButtonis nownull
Below, all steps are detailed.
symfony new --full issue-ux-turbo
cd issue-ux-turbo
symfony console make:controller HomeOpen src/Controller/HomeController and edit it:
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class HomeController extends AbstractController
{
#[Route('/home', name: 'home')]
public function index(Request $request): Response
{
$form = $this->createFormBuilder()
->add('task', TextType::class, ['required' => false])
->add('save', SubmitType::class, ['label' => 'SAVE'])
->add('saveAndAdd', SubmitType::class, ['label' => 'Save and Add'])
->getForm();
$form->handleRequest($request);
$clicked = "Form wasn't submitted";
$code = 200;
if ($form->isSubmitted() && $form->isValid()) {
$button = $form->getClickedButton();
if ($button instanceof FormInterface) {
$clicked = $button->getName();
} else {
$clicked = serialize($button); //will return N; (button is null when turbo is running)
}
$code = 422;
}
$response = new Response(null, $code);
return $this->render('home/index.html.twig', [
'clicked' => $clicked,
'form' => $form->createView(),
'controller_name' => 'HomeController',
], $response);
}
}Open templates/home/index.html.twig and edit it to add clicked and form:
{% extends 'base.html.twig' %}
{% block title %}Hello HomeController!{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
{{ form(form) }}
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ '/home/alexandre/PhpstormProjects/issue-ux-turbo/src/Controller/HomeController.php'|file_link(0) }}">src/Controller/HomeController.php</a></code></li>
<li>Your template at <code><a href="{{ '/home/alexandre/PhpstormProjects/issue-ux-turbo/templates/home/index.html.twig'|file_link(0) }}">templates/home/index.html.twig</a></code></li>
<li>Clicked button <code>{{ clicked }}</code></li>
</ul>
</div>
{% endblock %}
Test it, no issues yet.
Install symfony/ux-turbo
symfony composer require symfony/ux-turbo
yarn install --force
yarn run encore devUncomment the Twig helpers in templates/base.html.twig
Test it, the bug appears !
Disable Javascript, the bug disappears, of course.
Possible Solution
This is perhaps a Turbo bug.