Welcome to Symfony UX Discussions! #2095

smnandre · 2024-08-23T17:56:48Z

smnandre
Aug 23, 2024
Maintainer

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 · 2024-09-10T09:52:26Z

Diarill
Sep 10, 2024

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

1 reply

chapterjason Sep 10, 2024

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 · 2024-09-10T14:52:38Z

Diarill
Sep 10, 2024

  // 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,
      ]);
  }
}

2 replies

chapterjason Sep 10, 2024

Things you could check:

If the rendered form contains the field with attributes
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
does the autoregistration work https://symfony.com/bundles/StimulusBundle/current/index.html
try to manually register the controller in the bootstrap file

Diarill Sep 10, 2024

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 · 2024-09-10T17:07:11Z

smnandre
Sep 10, 2024
Maintainer Author

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 :)

1 reply

chapterjason Sep 10, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Welcome to Symfony UX Discussions! #2095

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Welcome to Symfony UX Discussions! #2095

Uh oh!

smnandre Aug 23, 2024 Maintainer

Replies: 3 comments · 4 replies

Uh oh!

Diarill Sep 10, 2024

Uh oh!

chapterjason Sep 10, 2024

Uh oh!

Diarill Sep 10, 2024

Uh oh!

Uh oh!

chapterjason Sep 10, 2024

Uh oh!

Diarill Sep 10, 2024

Uh oh!

smnandre Sep 10, 2024 Maintainer Author

Uh oh!

chapterjason Sep 10, 2024

smnandre
Aug 23, 2024
Maintainer

Replies: 3 comments 4 replies

Diarill
Sep 10, 2024

Diarill
Sep 10, 2024

smnandre
Sep 10, 2024
Maintainer Author