[Autocomplete] Distinct autocomplete field from normal field in templates

[AlexandreGerault]

Hi folks.

I was wondering how to customize choice_widget without impacting the autocomplete field. After a bit of looking I ended up with this solution:

{% block choice_widget %}
    {% set attr = attr|merge({'class': 'mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm'}) %}

    {% if attr['data-controller'] is not defined %}
    <select name="{{ full_name }}" {{ block('widget_attributes') }}>
        {% for choice in choices %}
            <option value="{{ choice.value }}" {% if choice.value == value %}selected{% endif %}>{{ choice.label }}</option>
        {% endfor %}
    </select>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

It is not ideal for readability to only check the presence of data-controller in attributes, and might be side effects with other inputs defining a data-controller attribute.

I'd rather expect a is_autocomplete variable instead. We were discussing about this with @weaverryan on the Slack. Before opening a PR, it might be better to discuss the pros/cons in an issue 😄

What's your point about this?

[norkunas]

We have this:

{% block choice_widget_collapsed %}
  {% if autocomplete %}
    {%- set attr = attr|merge(stimulus_controller('symfony/ux-autocomplete/autocomplete').toArray()) -%}
    {%- set attr = attr|merge({ 'data-symfony--ux-autocomplete--autocomplete-tom-select-options-value': '{"closeAfterSelect":false}' }) -%}
    {{- parent() -}}
  {% else %}
    {{- parent() -}}
  {% endif %}
{% endblock %}

:)

[weaverryan]

@norkunas where did that autocomplete variable come from? And why did you need to add the symfony/ux-autocomplete/autocomplete controller manually? Or are you completely skipping setting the autocomplete option in your form and are instead setting an autocomplete view variable manually for the fields where you want autocomplete?

Btw, I see you're always setting a tom select options value. I wonder if we could add a nicer way to specify global defaults... or at least document doing this in a form type extension.

[AlexandreGerault]

Like @weaverryan I'm curious where this autocomplete variable came from. That's what I was looking for but it does not seem to be available by default (maybe you did what @weaverryan suggested you did 🤷 )

Indeed, this code throws a Twig RuntimeError:

{% block choice_widget %}
    {% set attr = attr|merge({'class': 'mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm'}) %}

    {% if not autocomplete %}
        <select name="{{ full_name }}" {{ block('widget_attributes') }}>
            {% for choice in choices %}
                <option value="{{ choice.value }}" {% if choice.value == value %}selected{% endif %}>{{ choice.label }}</option>
            {% endfor %}
        </select>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

Variable "autocomplete" does not exist.

I'm just wandering on my side if there's a reason for such a variable not to exist that I'm not aware of, or if I could suggest a PR about this to add this variable available to the view 😄

[norkunas]

I think AutocompleteChoiceTypeExtension sets it

[AlexandreGerault]

I've been reading this class and there's nothing that seem to pass this variable to the form view. Actually, the finishView method adds some view variables, but not a variable that would allow to do what we are discussing here I think (I mean something that would make easily readable to know if it's an autocomplete field or not)
Here's the method code:

public function finishView(FormView $view, FormInterface $form, array $options)
{
    if (!$options['autocomplete']) {
        return;
    }

    $attr = $view->vars['attr'] ?? [];

    $controllerName = 'symfony--ux-autocomplete--autocomplete';
    $attr['data-controller'] = trim(($attr['data-controller'] ?? '').' '.$controllerName);

    $values = [];
    if ($options['autocomplete_url']) {
        $values['url'] = $options['autocomplete_url'];
    }

    if ($options['options_as_html']) {
        $values['options-as-html'] = '';
    }

    if ($options['allow_options_create']) {
        $values['allow-options-create'] = '';
    }

    if ($options['tom_select_options']) {
        $values['tom-select-options'] = json_encode($options['tom_select_options']);
    }

    if ($options['max_results']) {
        $values['max-results'] = $options['max_results'];
    }

    if ($options['min_characters']) {
        $values['min-characters'] = $options['min_characters'];
    }

    $values['no-results-found-text'] = $this->trans($options['no_results_found_text']);
    $values['no-more-results-text'] = $this->trans($options['no_more_results_text']);
    $values['preload'] = $options['preload'];

    foreach ($values as $name => $value) {
        $attr['data-'.$controllerName.'-'.$name.'-value'] = $value;
    }

    $view->vars['attr'] = $attr;
}

I'd add something like $attr['autocomplete'] = true;, if I'm not misunderstanding what's doing.
EDIT 1: I'm not very familiar with Symfony forms, so maybe it has nothing to do with the attributes and should be registered like $view->vars['autocomplete'] = true; 🤷
EDIT 2: After some manual testing, should be what's described in EDIT 1 I guess 😄

[weaverryan]

Yup, that's exactly what I'd do. We need $view->vars['autocomplete'] = true. PR welcome :)

[AlexandreGerault]

Ok I can create one in minutes. But what about tests? As it's not an attribute I'm not sure how to tests this if needed 🤔