[Forms] FormFlows cannot jumps to next step with Turbo #62666
-
Symfony version(s) affected7.4 DescriptionWhen creating a new Symfony application with --webapp, it comes with the Stimulus and Turbo JavaScript tools enabled by default. By default, Turbo is enabled in the configuration and allows AJAX requests to be made without reloading the page. This feature conflicts with the "next", "previous", and "finish" buttons of the FormFlow component. When the user clicks on the navigation buttons, an AJAX request is sent and the page never reloads. As a result, the form does not move to the next step. How to reproduce
Possible SolutionFor now, the workaround is to disable Turbo in the Symfony configuration. Additional ContextNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission So, to make Turbo handle the transition correctly, return a 303 status code for the next success step, or apply this trait in every controller that implements form flows: trait TurboFlowTrait
{
public function render(string $view, array $parameters = [], ?Response $response = null): Response
{
$response ??= new Response();
foreach ($parameters as $k =>$flow) {
if (!$flow instanceof FormFlowInterface) {
continue;
}
$parameters[$k] = $flow->getStepForm();
if (200 !== $response->getStatusCode()) {
continue;
}
$response->setStatusCode(match (true) {
!$flow->isSubmitted() => 200,
!$flow->isValid() => 422,
!$flow->isFinished() => 303,
});
}
return parent::render($view, $parameters, $response);
}
}This ensures the flow step is created Your form flow controller would then look like this: class AnyFormFlowController extends AbstractController
{
use TurboFlowTrait; // <-- add trait
#[Route('/form-flow')]
public function __invoke(Request $request): Response
{
// ...
return $this->render('any_flow.html.twig', [
'form' => $flow, // <-- without calling getStepForm()
]);
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your answer, your component is really greate. |
Beta Was this translation helpful? Give feedback.
https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission
So, to make Turbo handle the transition correctly, return a 303 status code for the next success step, or apply this trait in every controller that implements form flows: