Only add the clear_button plugin to TomSelect if the form element is not required

we need to add our own `required` attr here, as symfony does not always render the `required` form view variable see: https://github.com/symfony/symfony/blob/b1b77f366d42a58c1cd0879c605b997d05279d01/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig\#L59-L61

Author: bendavies

src/Autocomplete/assets/src/controller.ts

@@ -92,7 +92,7 @@ export default class extends Controller {
 
  // multiple values excepted if this is NOT A select (i.e. input) or a multiple select
  const isMultiple = !this.selectElement || this.selectElement.multiple;
- if (!this.formElement.disabled && !isMultiple) {
+ if (!this.formElement.required && !this.formElement.disabled && !isMultiple) {
  plugins.clear_button = { title: '' };
  }
 

src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php

@@ -49,6 +49,8 @@ public function finishView(FormView $view, FormInterface $form, array $options):
 
  $attr = $view->vars['attr'] ?? [];
 
+ $attr['required'] = $view->vars['required'];
+
  $controllerName = 'symfony--ux-autocomplete--autocomplete';
  $attr['data-controller'] = trim(($attr['data-controller'] ?? '').' '.$controllerName);
 

src/Autocomplete/tests/Fixtures/Form/ProductType.php

@@ -29,6 +29,16 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
  'autocomplete' => true,
  'mapped' => false,
  ])
+ ->add('colour', ChoiceType::class, [
+ 'choices' => [
+ 'red' => 'red',
+ 'blue' => 'blue',
+ 'green' => 'green',
+ ],
+ 'autocomplete' => true,
+ 'mapped' => false,
+ 'required' => false,
+ ])
  ->add('tags', TextType::class, [
  'mapped' => false,
  'autocomplete' => true,

src/Autocomplete/tests/Functional/AutocompleteFormRenderingTest.php

@@ -33,11 +33,20 @@ public function testFieldsRenderWithStimulusController()
  ->assertElementAttributeContains('#product_category_autocomplete', 'data-controller', 'custom-autocomplete symfony--ux-autocomplete--autocomplete')
  ->assertElementAttributeContains('#product_category_autocomplete', 'data-symfony--ux-autocomplete--autocomplete-url-value', '/test/autocomplete/category_autocomplete_type')
  ->assertElementAttributeContains('#product_category_autocomplete', 'data-symfony--ux-autocomplete--autocomplete-min-characters-value', '2')
+ ->assertElementAttributeContains('#product_category_autocomplete', 'required', 'required')
  ->assertElementAttributeContains('#product_category_autocomplete', 'data-symfony--ux-autocomplete--autocomplete-max-results-value', '25')
 
  ->assertElementAttributeContains('#product_portionSize', 'data-controller', 'symfony--ux-autocomplete--autocomplete')
+ ->assertElementAttributeContains('#product_portionSize', 'required', 'required')
+
+ ->assertElementAttributeContains('#product_colour', 'data-controller', 'symfony--ux-autocomplete--autocomplete')
+ // not implemented in zenstruck/browser
+ // ->elementAttributeNotExists('#product_colour', 'required')
+ ->assertNotSeeElement('#product_colour[required]')
+
  ->assertElementAttributeContains('#product_tags', 'data-controller', 'symfony--ux-autocomplete--autocomplete')
  ->assertElementAttributeContains('#product_tags', 'data-symfony--ux-autocomplete--autocomplete-tom-select-options-value', 'createOnBlur')
+ ->assertElementAttributeContains('#product_tags', 'required', 'required')
  ;
  }