From 2486074e681505feee958e8f0ca02deda20eb0aa Mon Sep 17 00:00:00 2001
From: MyuTsu <gaetan.langlois31@gmail.com>
Date: Mon, 15 Jun 2026 16:13:46 +0200
Subject: [PATCH 1/5] fix(tag_dropdown): fix tag dropdown to allow tag creation
 directly from the field

---
 CHANGELOG.md                              |  1 +
 inc/tag.class.php                         |  1 +
 public/js/modules/TagDropdownColorizer.js |  3 ++-
 templates/dropdown.html.twig              | 21 ++++++++++-----------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41cc544a..d98d43e1 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/inc/tag.class.php b/inc/tag.class.php
index 664b86d3..07e0650c 100644
--- a/inc/tag.class.php
+++ b/inc/tag.class.php
@@ -706,6 +706,7 @@ public static function showTagDropdown($params = [])
             '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,
diff --git a/public/js/modules/TagDropdownColorizer.js b/public/js/modules/TagDropdownColorizer.js
index 38aa03ca..6b838c2b 100644
--- a/public/js/modules/TagDropdownColorizer.js
+++ b/public/js/modules/TagDropdownColorizer.js
@@ -72,7 +72,8 @@ export class GlpiPluginTagTagDropdownColorizer {
         });
 
         $select.on('change select2:select select2:unselect', (event) => {
-            this.applyTagColors($(event.target));
+            const $target = $(event.target);
+            setTimeout(() => this.applyTagColors($target), 0);
         });
 
         $select.on('select2:open', () => {
diff --git a/templates/dropdown.html.twig b/templates/dropdown.html.twig
index 44220e5a..a888dfe5 100644
--- a/templates/dropdown.html.twig
+++ b/templates/dropdown.html.twig
@@ -39,17 +39,12 @@
     'values'  : selected_tags,
     'multiple': true,
     'mb'      : '',
-    'add_data_attributes': {
-        'glpi-plugin-tag-dropdown-uuid': rand
+    'condition': condition,
+    '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 = [] %}
 
@@ -85,11 +80,15 @@
     {% endif %}
 {% endif %}
 
-{{ fields.field(
+{{ 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>

From dce9c759804b7b4f77f9d5b9daa4994a6a96bc58 Mon Sep 17 00:00:00 2001
From: MyuTsu <gaetan.langlois31@gmail.com>
Date: Tue, 16 Jun 2026 14:05:49 +0200
Subject: [PATCH 2/5] fix tests

---
 inc/questiontype.class.php   | 14 +++++++++-----
 templates/dropdown.html.twig |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/inc/questiontype.class.php b/inc/questiontype.class.php
index a288eb6e..478b8f13 100644
--- a/inc/questiontype.class.php
+++ b/inc/questiontype.class.php
@@ -79,13 +79,14 @@ public function formatRawAnswer(mixed $answer, Question $question): string
     #[Override]
     public function renderAdministrationTemplate(?Question $question): string
     {
-        [$available_tags, $available_tags_color] = $this->getAvailableTags();
+        [$available_tags, $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 +98,14 @@ public function renderAdministrationTemplate(?Question $question): string
     #[Override]
     public function renderEndUserTemplate(Question $question): string
     {
-        [$available_tags, $available_tags_color] = $this->getAvailableTags($question->getForm());
+        [$available_tags, $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'     => [
@@ -144,7 +146,7 @@ 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 +156,14 @@ 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, $available_tags_color, $condition];
     }
 }
diff --git a/templates/dropdown.html.twig b/templates/dropdown.html.twig
index a888dfe5..dec5b761 100644
--- a/templates/dropdown.html.twig
+++ b/templates/dropdown.html.twig
@@ -39,7 +39,7 @@
     'values'  : selected_tags,
     'multiple': true,
     'mb'      : '',
-    'condition': condition,
+    'condition': condition|default([]),
     'specific_tags': {
         'data-glpi-plugin-tag-dropdown-uuid': rand
     }

From 371b09ce8992181109c6881836fdbd61135a5875 Mon Sep 17 00:00:00 2001
From: MyuTsu <gaetan.langlois31@gmail.com>
Date: Wed, 17 Jun 2026 10:29:47 +0200
Subject: [PATCH 3/5] review

---
 inc/destinationfield.class.php        |  4 ++--
 inc/questiontype.class.php            | 10 +++-------
 inc/tag.class.php                     |  2 --
 templates/destinationfield.html.twig  |  2 +-
 templates/question_dropdown.html.twig |  4 ++--
 templates/tag_dropdown.html.twig      |  2 +-
 6 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/inc/destinationfield.class.php b/inc/destinationfield.class.php
index 9604144f..06edaffa 100644
--- a/inc/destinationfield.class.php
+++ b/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
diff --git a/inc/questiontype.class.php b/inc/questiontype.class.php
index 478b8f13..8178de41 100644
--- a/inc/questiontype.class.php
+++ b/inc/questiontype.class.php
@@ -79,13 +79,12 @@ public function formatRawAnswer(mixed $answer, Question $question): string
     #[Override]
     public function renderAdministrationTemplate(?Question $question): string
     {
-        [$available_tags, $available_tags_color, $condition] = $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' => [
@@ -98,13 +97,12 @@ public function renderAdministrationTemplate(?Question $question): string
     #[Override]
     public function renderEndUserTemplate(Question $question): string
     {
-        [$available_tags, $available_tags_color, $condition] = $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,
@@ -144,7 +142,6 @@ public function getAvailableTags(?Form $form = null): array
         }
 
         $tag                  = new PluginTagTag();
-        $available_tags       = [];
         $available_tags_color = [];
         $condition = [
             'is_active' => 1,
@@ -160,10 +157,9 @@ public function getAvailableTags(?Form $form = null): array
         $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, $condition];
+        return [$available_tags_color, $condition];
     }
 }
diff --git a/inc/tag.class.php b/inc/tag.class.php
index 07e0650c..3c92cb28 100644
--- a/inc/tag.class.php
+++ b/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,6 @@ 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,
diff --git a/templates/destinationfield.html.twig b/templates/destinationfield.html.twig
index 98ac115f..ab5ad8bf 100644
--- a/templates/destinationfield.html.twig
+++ b/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'         : '',
diff --git a/templates/question_dropdown.html.twig b/templates/question_dropdown.html.twig
index 702eaf84..4bd920fe 100644
--- a/templates/question_dropdown.html.twig
+++ b/templates/question_dropdown.html.twig
@@ -35,11 +35,11 @@
 {% 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>
diff --git a/templates/tag_dropdown.html.twig b/templates/tag_dropdown.html.twig
index eb1260f6..b242c316 100644
--- a/templates/tag_dropdown.html.twig
+++ b/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,

From 0f01a0137d240675089301b22da0e8a796df28a8 Mon Sep 17 00:00:00 2001
From: MyuTsu <gaetan.langlois31@gmail.com>
Date: Wed, 17 Jun 2026 11:48:22 +0200
Subject: [PATCH 4/5] review

---
 templates/dropdown.html.twig | 1 -
 1 file changed, 1 deletion(-)

diff --git a/templates/dropdown.html.twig b/templates/dropdown.html.twig
index dec5b761..b6faa665 100644
--- a/templates/dropdown.html.twig
+++ b/templates/dropdown.html.twig
@@ -45,7 +45,6 @@
     }
 }|merge(dropdown_params|default({})) %}
 
-
 {% set tooltip_parts = [] %}
 
 {% if call('PluginTagTag::canCreate') and show_search_tooltip|default(true) %}

From 6640f0c6db28a032f20bfc10d4000fa06603b1f1 Mon Sep 17 00:00:00 2001
From: MyuTsu <gaetan.langlois31@gmail.com>
Date: Fri, 19 Jun 2026 11:12:20 +0200
Subject: [PATCH 5/5] correct tag background color in dropdown

---
 public/js/common.js                       | 34 --------
 public/js/modules/TagDropdownColorizer.js | 97 -----------------------
 templates/dropdown.html.twig              | 54 ++++++++++---
 templates/question_dropdown.html.twig     | 14 ----
 4 files changed, 42 insertions(+), 157 deletions(-)
 delete mode 100644 public/js/modules/TagDropdownColorizer.js

diff --git a/public/js/common.js b/public/js/common.js
index 95ba833c..b36a48ed 100644
--- a/public/js/common.js
+++ b/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);
-};
diff --git a/public/js/modules/TagDropdownColorizer.js b/public/js/modules/TagDropdownColorizer.js
deleted file mode 100644
index 6b838c2b..00000000
--- a/public/js/modules/TagDropdownColorizer.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * -------------------------------------------------------------------------
- * Tag plugin for GLPI
- * -------------------------------------------------------------------------
- *
- * LICENSE
- *
- * This file is part of Tag.
- *
- * Tag is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * Tag is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Tag. If not, see <http://www.gnu.org/licenses/>.
- * -------------------------------------------------------------------------
- * @copyright Copyright (C) 2014-2023 by Teclib'.
- * @license   GPLv2 https://www.gnu.org/licenses/gpl-2.0.html
- * @link      https://github.com/pluginsGLPI/tag
- * -------------------------------------------------------------------------
- */
-
-export class GlpiPluginTagTagDropdownColorizer {
-    constructor(tagsColor, selector, $container) {
-        this.tagsColor = tagsColor;
-        this.selector = selector;
-        this.$container = $container;
-
-        this.init();
-    }
-
-    isDark(hexColor) {
-        if (!hexColor) return false;
-        hexColor = hexColor.replace('#', '');
-        const r = parseInt(hexColor.substr(0, 2), 16);
-        const g = parseInt(hexColor.substr(2, 2), 16);
-        const b = parseInt(hexColor.substr(4, 2), 16);
-        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-        return luminance < 0.5;
-    }
-
-    applyTagColors($select) {
-        const selectedIds = $select.find('option:selected').map(function() {
-            return $(this).val();
-        }).get();
-
-        const $container = $select.nextAll('.select2').find('.select2-selection__rendered');
-        $container.find('.select2-selection__choice').each((index, element) => {
-            const id = selectedIds[index];
-            const color = this.tagsColor[id];
-            if (color) {
-                $(element).css('background-color', color);
-                $(element).css('color', this.isDark(color) ? '#eeeeee' : '');
-
-                // Also style the remove button for better visibility
-                $(element).find('.select2-selection__choice__remove').css('color', this.isDark(color) ? '#eeeeee' : '');
-            }
-        });
-    }
-
-    init() {
-        const $select = this.$container.find(this.selector);
-
-        $select.each((index, element) => {
-            this.applyTagColors($(element));
-        });
-
-        $select.on('change select2:select select2:unselect', (event) => {
-            const $target = $(event.target);
-            setTimeout(() => this.applyTagColors($target), 0);
-        });
-
-        $select.on('select2:open', () => {
-            setTimeout(() => {
-                $('.select2-results__option').each((index, element) => {
-                    const matches = element.id.match(/result-[^-]+-(\d+)$/);
-                    if (matches && matches[1]) {
-                        const color = this.tagsColor[matches[1]];
-                        // Cible uniquement le span SANS la classe select2-rendered__match
-                        $(element).find('span:not(.select2-rendered__match)').css({
-                            'background-color': color ? color : '',
-                            'padding': color ? '2px' : '',
-                            'color': (color && this.isDark(color)) ? '#fff' : '',
-                            'border-radius': '2px'
-                        });
-                    }
-                });
-            }, 0);
-        });
-    }
-}
diff --git a/templates/dropdown.html.twig b/templates/dropdown.html.twig
index b6faa665..5c398806 100644
--- a/templates/dropdown.html.twig
+++ b/templates/dropdown.html.twig
@@ -40,6 +40,8 @@
     'multiple': true,
     'mb'      : '',
     'condition': condition|default([]),
+    'templateResult': 'formatOptionResult',
+    'templateSelection': 'formatOptionSelection',
     'specific_tags': {
         'data-glpi-plugin-tag-dropdown-uuid': rand
     }
@@ -79,6 +81,46 @@
     {% endif %}
 {% endif %}
 
+<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,
@@ -90,18 +132,6 @@
     })
 ) }}
 
-<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() {
diff --git a/templates/question_dropdown.html.twig b/templates/question_dropdown.html.twig
index 4bd920fe..b72523ae 100644
--- a/templates/question_dropdown.html.twig
+++ b/templates/question_dropdown.html.twig
@@ -41,17 +41,3 @@
     '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>