Welcome to Symfony UX Discussions!

[smnandre]

We're opening GitHub Discussions for Symfony UX to handle support and Q&A.

Feel free to ask questions, share solutions, and collaborate with the community!

[Diarill]

Hello, I'm a French speaker and I use deepl to translate into English.
I need help with Symfony -UX-Autocomplete for a project I'm currently developing. I'm doing this in a stimulus controller that I've named test_controller.js

`import {Controller} from '@hotwired/stimulus';

export default class extends Controller {
connect() {
this.element.addEventListener('autocomplete:open', this.onOpen.bind(this));
}

onOpen(event) {
    console.log('Autocomplete open for :', event.target);
}

}`

In my symfony form type, I have this :

`<?php

namespace App\Form;

use App\Entity\Property;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class PropertyType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('asset', PropertyAutocompleteField::class, [
'autocomplete' => true, // Activer l'autocomplete
'attr' => [
'data-controller' => 'test',
'data-action' => 'autocomplete:open->test#onOpen'
]
])
;
}

public function configureOptions(OptionsResolver $resolver): void
{
    $resolver->setDefaults([
        'data_class' => Property::class,
    ]);
}

}`

But nothing happens in the browser console when I run the code. I need help

[chapterjason]

Can you please format the question properly based on the GitHub formatting syntax so it is more readable?

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

[Diarill]

  // test_controller.js
  import {Controller} from '@hotwired/stimulus';
  
  export default class extends Controller {
  connect() {
  this.element.addEventListener('autocomplete:open', this.onOpen.bind(this));
  }
  
  onOpen(event) {
      console.log('Autocomplete open for :', event.target);
  }
}

<?php

namespace App\Form;

use App\Entity\Property;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class PropertyType extends AbstractType
{
  public function buildForm(FormBuilderInterface $builder, array $options): void
  {
    $builder
      ->add('asset', PropertyAutocompleteField::class, [
        'autocomplete' => true, // Activer l'autocomplete
        'attr' => [
          'data-controller' => 'test',
          'data-action' => 'autocomplete:open->test#onOpen'
        ]
      ])
    ;
  }

  public function configureOptions(OptionsResolver $resolver): void
  {
      $resolver->setDefaults([
          'data_class' => Property::class,
      ]);
  }
}

[chapterjason]

Things you could check:

1. If the rendered form contains the field with attributes
2. If the controller works outside of the form just write plain a tag and add the data-controller attribute, in debug you should see a log entry the browser dev console
3. does the autoregistration work https://symfony.com/bundles/StimulusBundle/current/index.html
4. try to manually register the controller in the bootstrap file

[Diarill]

Thanks for the interest.
Perhaps I should have made it clear that the test_controller.js controller does work, I mean, is attached to my asset form field. When my page loads, the console tells me that the controller is active on my element. However, the autocomplete:open event, which should be activated when the Dropdown opens, doesn't work. Also, I've looked through all the available documentation about implementing @symfony/ux-autocomplete in a Symfony project, but haven't found anything.

[smnandre]

Hi @Diarill : could you open a new discussion thread ? think you'll have more chances to get help in a dedicated topic, rather than under this announcement :)

[chapterjason]

Didn't saw that either, was on github mobile. :/