[Autocomplete] clear tomselect instance to avoid double initialization

apps/e2e/README.md

@@ -16,7 +16,7 @@ to ensure they work as expected for multiple Symfony versions and various browse
 
 ```shell
 docker compose up -d
-symfony php ../.github/build-packages.php
+symfony php ../../.github/build-packages.php
 
 SYMFONY_REQUIRE=6.4.* symfony composer update
 # or...

apps/e2e/assets/controllers/movie-autocomplete_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async connect() {
+        this.component = await getComponent(this.element.closest('[data-controller*="live"]'));
+
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.addEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.removeEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    _onPreConnect(event) {
+        const options = event.detail.options;
+        options.render = {
+            ...options.render,
+            option: (item) => {
+                return `<div data-test-id="autocomplete-option" data-title="${item.title || item.text}">${item.text}</div>`;
+            },
+        };
+    }
+
+    _onConnect(event) {
+        const tomSelect = event.detail.tomSelect;
+
+        tomSelect.on('item_add', (value, item) => {
+            const title = item.getAttribute('data-title') || item.textContent;
+            this.component.emit('movie-selected', { title });
+        });
+    }
+}

apps/e2e/assets/controllers/videogame-autocomplete_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async connect() {
+        this.component = await getComponent(this.element.closest('[data-controller*="live"]'));
+
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.addEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.removeEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    _onPreConnect(event) {
+        const options = event.detail.options;
+        options.render = {
+            ...options.render,
+            option: (item) => {
+                return `<div data-test-id="autocomplete-option" data-title="${item.title || item.text}">${item.text}</div>`;
+            },
+        };
+    }
+
+    _onConnect(event) {
+        const tomSelect = event.detail.tomSelect;
+
+        tomSelect.on('item_add', (value, item) => {
+            const title = item.getAttribute('data-title') || item.textContent;
+            this.component.emit('videogame-selected', { title });
+        });
+    }
+}

apps/e2e/composer.json

@@ -61,6 +61,7 @@
         "symfony/ux-typed": "^2.29.1",
         "symfony/ux-vue": "^2.29.1",
         "symfony/yaml": "6.4.*|7.3.*",
+        "symfonycasts/dynamic-forms": "^0.2",
         "twig/extra-bundle": "^3.21",
         "twig/twig": "^3.21.1"
     },

apps/e2e/src/Controller/AutocompleteController.php

@@ -2,14 +2,27 @@
 
 namespace App\Controller;
 
-use Psr\Log\LoggerInterface;
+use App\Form\Type\AutocompleteSelectType;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
-use Symfony\UX\Chartjs\Model\Chart;
 
 #[Route('/ux-autocomplete')]
 final class AutocompleteController extends AbstractController
 {
+    #[Route('/non-ajax')]
+    public function index()
+    {
+        $form = $this->createForm(AutocompleteSelectType::class);
+
+        return $this->render(
+            'ux_autocomplete/index.html.twig',
+            ['form' => $form->createView()]
+        );
+    }
+
+    #[Route('/custom-controller')]
+    public function customController()
+    {
+        return $this->render('ux_autocomplete/custom_controller.html.twig');
+    }
 }

apps/e2e/src/Controller/TestAutocompleteController.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/test')]
+final class TestAutocompleteController extends AbstractController
+{
+    #[Route('/autocomplete-dynamic-form', name: 'test_autocomplete_dynamic_form')]
+    public function dynamicForm(): Response
+    {
+        return $this->render('test/autocomplete_dynamic_form.html.twig');
+    }
+
+    #[Route('/autocomplete/movie', name: 'test_autocomplete_movie')]
+    public function movieAutocomplete(Request $request): JsonResponse
+    {
+        $query = $request->query->get('query', '');
+
+        $movies = [
+            ['value' => 'movie_1', 'text' => 'The Matrix (1999)', 'title' => 'movie Movie #1'],
+            ['value' => 'movie_2', 'text' => 'Inception (2010)', 'title' => 'movie Movie #2'],
+            ['value' => 'movie_3', 'text' => 'The Dark Knight (2008)', 'title' => 'movie Movie #3'],
+            ['value' => 'movie_4', 'text' => 'Interstellar (2014)', 'title' => 'movie Movie #4'],
+            ['value' => 'movie_5', 'text' => 'Pulp Fiction (1994)', 'title' => 'movie Movie #5'],
+        ];
+
+        $results = array_filter($movies, function ($movie) use ($query) {
+            return '' === $query || false !== stripos($movie['text'], $query);
+        });
+
+        return $this->json([
+            'results' => array_values($results),
+        ]);
+    }
+
+    #[Route('/autocomplete/videogame', name: 'test_autocomplete_videogame')]
+    public function videogameAutocomplete(Request $request): JsonResponse
+    {
+        $query = $request->query->get('query', '');
+
+        $games = [
+            ['value' => 'videogame_1', 'text' => 'Halo: Combat Evolved (2001)', 'title' => 'videogame Game #1'],
+            ['value' => 'videogame_2', 'text' => 'The Legend of Zelda (1986)', 'title' => 'videogame Game #2'],
+            ['value' => 'videogame_3', 'text' => 'Half-Life 2 (2004)', 'title' => 'videogame Game #3'],
+            ['value' => 'videogame_4', 'text' => 'Portal (2007)', 'title' => 'videogame Game #4'],
+            ['value' => 'videogame_5', 'text' => 'Mass Effect 2 (2010)', 'title' => 'videogame Game #5'],
+        ];
+
+        $results = array_filter($games, function ($game) use ($query) {
+            return '' === $query || false !== stripos($game['text'], $query);
+        });
+
+        return $this->json([
+            'results' => array_values($results),
+        ]);
+    }
+}

apps/e2e/src/Form/Model/ProductionDto.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Form\Model;
+
+class ProductionDto
+{
+    public ?string $type = null;
+
+    public ?string $movieSearch = null;
+
+    public ?string $videogameSearch = null;
+
+    public ?string $title = null;
+}

apps/e2e/src/Form/Type/AutocompleteSelectType.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class AutocompleteSelectType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder->add(
+            'favorite_fruit',
+            ChoiceType::class,
+            [
+                'choices' => [
+                    'Apple' => 'apple',
+                    'Banana' => 'banana',
+                    'Cherry' => 'cherry',
+                    'Coconut' => 'coconut',
+                    'Grape' => 'grape',
+                    'Kiwi' => 'kiwi',
+                    'Lemon' => 'lemon',
+                    'Mango' => 'mango',
+                    'Orange' => 'orange',
+                    'Papaya' => 'papaya',
+                    'Peach' => 'peach',
+                    'Pineapple' => 'pineapple',
+                    'Pear' => 'pear',
+                    'Pomegranate' => 'pomegranate',
+                    'Pomelo' => 'pomelo',
+                    'Raspberry' => 'raspberry',
+                    'Strawberry' => 'strawberry',
+                    'Watermelon' => 'watermelon',
+                ],
+                'autocomplete' => true,
+                'label' => 'Your favorite fruit:'
+            ]
+        );
+    }
+}

apps/e2e/src/Form/Type/MovieAutocompleteType.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class MovieAutocompleteType extends AbstractType
+{
+    public function __construct(
+        private UrlGeneratorInterface $urlGenerator
+    ) {
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'autocomplete' => true,
+            'autocomplete_url' => $this->urlGenerator->generate('test_autocomplete_movie'),
+            'tom_select_options' => [
+                'maxOptions' => null,
+            ],
+            'attr' => [
+                'data-test-id' => 'movie-autocomplete',
+                'data-controller' => 'movie-autocomplete',
+            ],
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return TextType::class;
+    }
+}

apps/e2e/src/Form/Type/ProductionType.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Form\Type;
+
+use App\Form\Model\ProductionDto;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfonycasts\DynamicForms\DependentField;
+use Symfonycasts\DynamicForms\DynamicFormBuilder;
+
+class ProductionType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder = new DynamicFormBuilder($builder);
+
+        $builder
+            ->add('type', ChoiceType::class, [
+                'choices' => [
+                    'Movie' => 'movie',
+                    'Videogame' => 'videogame',
+                ],
+                'placeholder' => 'Select a type',
+                'attr' => [
+                    'data-test-id' => 'production-type',
+                ],
+            ])
+            ->addDependent('movieSearch', ['type'], function (DependentField $field, ?string $type) {
+                if ('movie' !== $type) {
+                    return;
+                }
+
+                $field->add(MovieAutocompleteType::class, [
+                    'label' => 'Search Movies',
+                    'required' => false,
+                ]);
+            })
+            ->addDependent('videogameSearch', ['type'], function (DependentField $field, ?string $type) {
+                if ('videogame' !== $type) {
+                    return;
+                }
+
+                $field->add(VideogameAutocompleteType::class, [
+                    'label' => 'Search Videogames',
+                    'required' => false,
+                ]);
+            })
+            ->add('title', TextType::class, [
+                'required' => false,
+                'attr' => [
+                    'data-test-id' => 'production-title',
+                ],
+            ])
+        ;
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'data_class' => ProductionDto::class,
+        ]);
+    }
+}

apps/e2e/src/Form/Type/VideogameAutocompleteType.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class VideogameAutocompleteType extends AbstractType
+{
+    public function __construct(
+        private UrlGeneratorInterface $urlGenerator
+    ) {
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'autocomplete' => true,
+            'autocomplete_url' => $this->urlGenerator->generate('test_autocomplete_videogame'),
+            'tom_select_options' => [
+                'maxOptions' => null,
+            ],
+            'attr' => [
+                'data-test-id' => 'videogame-autocomplete',
+                'data-controller' => 'videogame-autocomplete',
+            ],
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return TextType::class;
+    }
+}