fix(tag_dropdown): fix tag dropdown to allow tag creation directly from the field

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Prevent the tag field from appearing in the satisfaction survey.
 - Fix display translations
 - Removed tag rights during plugin uninstall
+- Fix tag dropdown to allow tag creation directly from the field
 
 ## [2.14.3] - 2025-12-22
 

inc/destinationfield.class.php

@@ -62,7 +62,7 @@ public function renderConfigForm(
             throw new InvalidArgumentException("Unexpected config class");
         }
 
-        [$available_tags, $available_tags_color] = (new PluginTagQuestionType())->getAvailableTags();
+        [$available_tags_color, $condition] = (new PluginTagQuestionType())->getAvailableTags();
 
         $twig = TemplateRenderer::getInstance();
         return $twig->render('@tag/destinationfield.html.twig', [
@@ -77,8 +77,8 @@ public function renderConfigForm(
             'specific_values_extra_field' => [
                 'input_name'     => $input_name . "[" . PluginTagDestinationFieldConfig::SPECIFIC_TAG_IDS . "]",
                 'selected_tags'  => $config->getSpecificTagIDs() ?? [],
-                'available_tags' => $available_tags,
                 'tags_color'     => $available_tags_color,
+                'condition'      => $condition,
             ],
 
             // Specific additional config for SPECIFIC_ANSWERS strategy

inc/questiontype.class.php

@@ -79,13 +79,13 @@ public function formatRawAnswer(mixed $answer, Question $question): string
     #[Override]
     public function renderAdministrationTemplate(?Question $question): string
     {
-        [$available_tags, $available_tags_color] = $this->getAvailableTags();
+        [$available_tags_color, $condition] = $this->getAvailableTags();
 
         $twig = TemplateRenderer::getInstance();
         return $twig->render('@tag/question_dropdown.html.twig', [
             'input_name'      => 'default_value',
             'selected_tags'   => empty($question?->fields['default_value']) ? [] : explode(',', (string) $question->fields['default_value']),
-            'available_tags'  => $available_tags,
+            'condition'       => $condition,
             'tags_color'      => $available_tags_color,
             'dropdown_params' => [
                 'no_label' => true,
@@ -97,13 +97,13 @@ public function renderAdministrationTemplate(?Question $question): string
     #[Override]
     public function renderEndUserTemplate(Question $question): string
     {
-        [$available_tags, $available_tags_color] = $this->getAvailableTags($question->getForm());
+        [$available_tags_color, $condition] = $this->getAvailableTags($question->getForm());
 
         $twig = TemplateRenderer::getInstance();
         return $twig->render('@tag/question_dropdown.html.twig', [
             'input_name'          => $question->getEndUserInputName(),
             'selected_tags'       => empty($question?->fields['default_value']) ? [] : explode(',', (string) $question->fields['default_value']),
-            'available_tags'      => $available_tags,
+            'condition'           => $condition,
             'tags_color'          => $available_tags_color,
             'show_search_tooltip' => false,
             'dropdown_params'     => [
@@ -142,9 +142,8 @@ public function getAvailableTags(?Form $form = null): array
         }
 
         $tag                  = new PluginTagTag();
-        $available_tags       = [];
         $available_tags_color = [];
-        $result               = $tag->find([
+        $condition = [
             'is_active' => 1,
             'OR' => [
                 ['type_menu' => ['LIKE', '%\"Ticket\"%']],
@@ -154,12 +153,13 @@ public function getAvailableTags(?Form $form = null): array
                 ['type_menu' => ''],
                 ['type_menu' => 'NULL'],
             ],
-        ] + getEntitiesRestrictCriteria('', '', $active_entities_ids, true), 'name');
+        ] + getEntitiesRestrictCriteria('', '', $active_entities_ids, true);
+        $result               = $tag->find($condition, 'name');
+
         foreach ($result as $id => $data) {
-            $available_tags[$id] = $data['name'];
             $available_tags_color[$id] = $data['color'] ?: '#DDDDDD';
         }
 
-        return [$available_tags, $available_tags_color];
+        return [$available_tags_color, $condition];
     }
 }

inc/tag.class.php

@@ -660,7 +660,6 @@ public static function showTagDropdown($params = [])
 
         $available_tags = $tag->find($where, 'name');
         foreach ($available_tags as $tag_data) {
-            $available_tags[$tag_data['id']] = $tag_data['name'];
             $available_tags_color[$tag_data['id']] = $tag_data['color'] ?: '#DDDDDD';
         }
 
@@ -705,7 +704,7 @@ public static function showTagDropdown($params = [])
         TemplateRenderer::getInstance()->display('@tag/tag_dropdown.html.twig', [
             'extra_class'       => $extra_class ?? '',
             'selected_tags'     => $selected_tags,
-            'available_tags'    => $available_tags,
+            'condition'         => $where,
             'tags_color'        => $available_tags_color ?? [],
             'rand'              => $rand,
             'token_creation'    => $token_creation,

public/js/common.js

@@ -52,37 +52,3 @@ var idealTextColor = function(hexTripletColor) {
     var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);
     return ((255 - bgDelta) < nThreshold) ? "#000000" : "#E6E6E6";
 };
-
-var formatOptionSelection = function(option, container) {
-    var color = (typeof option.color !== 'undefined' && option.color !== '')
-        ? option.color
-        : '#DDDDDD';
-    var invertedcolor = idealTextColor(color);
-
-    $(container)
-        .css("background-color", color)
-        .css("border-color", invertedcolor)
-        .css("color", invertedcolor)
-        .children('.select2-selection__choice__remove')
-        .css("color", invertedcolor);
-
-    var _elt = $('<span></span>');
-    _elt.html(escapeMarkupText(option.text));
-    return _elt;
-};
-
-var formatOptionResult = function(option) {
-
-    var color = (typeof option.color !== 'undefined' && option.color !== '')
-        ? option.color
-        : '#DDDDDD';
-    var invertedcolor = idealTextColor(color);
-
-    var template = `
-        <span class="tag_choice" style="background-color: ${color}; color: ${invertedcolor}">
-            ${option.text}
-        </span>
-   `;
-
-    return $(template);
-};

templates/destinationfield.html.twig

@@ -34,9 +34,9 @@
     {% include "@tag/dropdown.html.twig" with {
         'input_name'         : specific_values_extra_field.input_name,
         'selected_tags'      : specific_values_extra_field.selected_tags,
-        'available_tags'     : specific_values_extra_field.available_tags,
         'tags_color'         : specific_values_extra_field.tags_color,
         'show_search_tooltip': show_search_tooltip|default(true),
+        'condition'          : condition,
         'dropdown_params'    : {
             'no_label'   : true,
             'mb'         : '',

templates/dropdown.html.twig

@@ -39,18 +39,14 @@
     'values'  : selected_tags,
     'multiple': true,
     'mb'      : '',
-    'add_data_attributes': {
-        'glpi-plugin-tag-dropdown-uuid': rand
+    'condition': condition|default([]),
+    'templateResult': 'formatOptionResult',
+    'templateSelection': 'formatOptionSelection',
+    'specific_tags': {
+        'data-glpi-plugin-tag-dropdown-uuid': rand
     }
 }|merge(dropdown_params|default({})) %}
 
-{% set field %}
-    {% do call('Dropdown::showFromArray', [input_name, available_tags, {
-        'value': null,
-        'rand': rand,
-     }|merge(options)]) %}
-{% endset %}
-
 {% set tooltip_parts = [] %}
 
 {% if call('PluginTagTag::canCreate') and show_search_tooltip|default(true) %}
@@ -85,25 +81,57 @@
     {% endif %}
 {% endif %}
 
-{{ fields.field(
+<script>
+    const colors = {{ tags_color|json_encode|raw }};
+
+    function formatOptionSelection(option, container) {
+        var color = colors[option.id] || option.color || '#DDDDDD';
+        var invertedcolor = idealTextColor(color);
+
+        $(container)
+            .css("background-color", color)
+            .css("border-color", invertedcolor)
+            .css("color", invertedcolor)
+            .children('.select2-selection__choice__remove')
+            .css("color", invertedcolor);
+
+        var _elt = $('<span></span>');
+        _elt.html(escapeMarkupText(option.text));
+        return _elt;
+    };
+
+    function formatOptionResult(option) {
+        if (!option.id) {
+            return option.text;
+        }
+
+        var color = colors[option.id];
+        var $span = $('<span class="tag_choice"></span>').text(option.text);
+
+        if (color) {
+            $span.css({
+                'background-color': color,
+                'color': idealTextColor(color),
+                'padding': '2px 4px',
+                'border-radius': '2px',
+            });
+        }
+
+        return $span;
+    };
+</script>
+
+{{ fields.dropdownField(
+    'PluginTagTag',
     input_name,
-    field ~ tooltip,
+    selected_tags,
     __('Tags', 'tag'),
-    options|merge({'id': 'dropdown_' ~ input_name|replace({'[': '_', ']': '_'}) ~ rand})
+    options|merge({
+        'rand': rand,
+        'add_field_html': tooltip,
+    })
 ) }}
 
-<script>
-    import(GLPI_PLUGINS_PATH.tag + "/js/modules/TagDropdownColorizer.js").then((m) => {
-        $(document).ready(function() {
-            new m.GlpiPluginTagTagDropdownColorizer(
-                {{ tags_color|json_encode|raw }},
-                'select[data-glpi-plugin-tag-dropdown-uuid="{{ rand }}"]',
-                $(document)
-            );
-        });
-    });
-</script>
-
 {% if show_save_button is defined and show_save_button %}
     <script>
         $(function() {

templates/question_dropdown.html.twig

@@ -35,23 +35,9 @@
 {% include "@tag/dropdown.html.twig" with {
     'input_name'         : input_name,
     'selected_tags'      : selected_tags,
-    'available_tags'     : available_tags,
     'tags_color'         : tags_color,
     'rand'               : rand,
     'show_search_tooltip': show_search_tooltip|default(true),
-    'dropdown_params'    : dropdown_params
+    'dropdown_params'    : dropdown_params,
+    'condition'          : condition,
 } %}
-
-<script>
-    $(document).on('glpi-form-editor-question-type-changed', (event, question, type) => {
-        if (type === 'PluginTagQuestionType') {
-            import("plugins/js/modules/TagDropdownColorizer.js").then((m) => {
-                new m.GlpiPluginTagTagDropdownColorizer(
-                    {{ tags_color|json_encode|raw }},
-                    'select[data-glpi-plugin-tag-dropdown-uuid="{{ rand }}"]',
-                    question
-                );
-            });
-        }
-    });
-</script>

templates/tag_dropdown.html.twig

@@ -81,9 +81,9 @@
 {% include "@tag/dropdown.html.twig" with {
     'input_name'     : '_plugin_tag_tag_values',
     'selected_tags'  : selected_tags,
-    'available_tags' : available_tags,
     'tags_color'     : tags_color,
     'rand'           : rand,
+    'condition'       : condition,
     'dropdown_params': {
         'id'               : 'tag_select_',
         'disabled'         : readOnly,