Open
Description
I have a problem when I use an autocomplete field, which uses a custom endpoint, together with a live component. I have simplified my case and added the files below. The problem is that when I select something in the autocomplete field, the message “The selected choice is invalid.” appears:
If I then click on “Save”, a message appears that I should select an element from the list, even though I have selected one:
Versions:
- symfony/form: 7.0.7
- symfony/ux-autocomplete: 2.17.0
- symfony/ux-live-component: 2.17.0
This is my form type:
<?php
namespace App\Form;
use App\Struct\TestFormStruct;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
class TestFormType extends AbstractType
{
public function __construct(
private readonly UrlGeneratorInterface $router,
) {
}
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder->add('testField', ChoiceType::class, [
'placeholder' => 'Please select...',
'autocomplete' => true,
'autocomplete_url' => $this->router->generate('api_test'),
'options_as_html' => true,
'no_more_results_text' => '',
]);
$builder->add('save', SubmitType::class);
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => TestFormStruct::class,
]);
}
}This is my TestFormStruct:
<?php
namespace App\Struct;
class TestFormStruct
{
private ?string $testField = null;
public function getTestField(): ?string
{
return $this->testField;
}
public function setTestField(?string $testField): void
{
$this->testField = $testField;
}
}This is the autocomplete_url action:
#[Route('/test', name: 'api_test', methods: ['GET'])]
public function test(): JsonResponse
{
return $this->json([
'results' => [
'options' => [
[
'value' => '1',
'text' => 'Pizza',
'group_by' => 'food',
],
[
'value' => '2',
'text' => 'Banana',
'group_by' => 'food',
],
],
'optgroups' => [
[
'value' => 'food',
'label' => 'food',
]
],
],
]);
}This is my live component:
<?php
declare(strict_types=1);
namespace App\Twig\Components;
use App\Form\TestFormType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;
#[AsLiveComponent]
class TestForm extends AbstractController
{
use ComponentWithFormTrait;
use DefaultActionTrait;
protected function instantiateForm(): FormInterface
{
return $this->createForm(TestFormType::class);
}
}And this is the template of my live component:
<div {{ attributes }}>
{{ form_start(form) }}
{{ form_row(form.testField) }}
{{ form_end(form) }}
</div>The component is added to a page with this: <twig:TestForm />
Does anyone have any idea what the problem is?