[LiveComponent] [Autocomplete] Autocomplete with custom data endpoint not working in a live component

[momocode-de]

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?