From b66b0339991c4cf1a68295fa2074ff23090e4c12 Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Mon, 4 Aug 2025 13:56:01 +1000
Subject: [PATCH] Small improvement

- allow passing html options to the hidden field with the tags values,
  to be used to add stimulus directive
- dispatch an input event when the hidden field with tags value gets
  updated, it allows stimulus controller (or javascript) to react to
  update
---
 app/components/tag_list_input_component.rb                  | 6 ++++--
 .../tag_list_input_component.html.haml                      | 2 +-
 .../tag_list_input_component/tag_list_input_controller.js   | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/tag_list_input_component.rb b/app/components/tag_list_input_component.rb
index b8da0371d7..c8b0f9a07b 100644
--- a/app/components/tag_list_input_component.rb
+++ b/app/components/tag_list_input_component.rb
@@ -3,12 +3,14 @@
 class TagListInputComponent < ViewComponent::Base
   def initialize(name:, tags:,
                  placeholder: I18n.t("components.tag_list_input.default_placeholder"),
-                 aria_label: nil)
+                 aria_label: nil,
+                 hidden_field_data_options: {})
     @name = name
     @tags = tags
     @placeholder = placeholder
     @aria_label_option = aria_label ? { 'aria-label': aria_label } : {}
+    @hidden_field_data_options = hidden_field_data_options
   end
 
-  attr_reader :name, :tags, :placeholder, :aria_label_option
+  attr_reader :name, :tags, :placeholder, :aria_label_option, :hidden_field_data_options
 end
diff --git a/app/components/tag_list_input_component/tag_list_input_component.html.haml b/app/components/tag_list_input_component/tag_list_input_component.html.haml
index 9a139a963b..c54ab4f322 100644
--- a/app/components/tag_list_input_component/tag_list_input_component.html.haml
+++ b/app/components/tag_list_input_component/tag_list_input_component.html.haml
@@ -2,7 +2,7 @@
   .tags-input
     .tags
       - # We use display:none instead of hidden field, so changes to the value can be picked up by the bulkFormController 
-      = text_field_tag name, tags.join(","), {"data-tag-list-input-target": "tagList", "style": "display: none"}
+      = text_field_tag name, tags.join(","), {"data-tag-list-input-target": "tagList", "style": "display: none"}.merge(hidden_field_data_options)
       %ul.tag-list{"data-tag-list-input-target": "list"}
         %template{"data-tag-list-input-target": "template"}
           %li.tag-item
diff --git a/app/components/tag_list_input_component/tag_list_input_controller.js b/app/components/tag_list_input_component/tag_list_input_controller.js
index 2ded4bb5a7..113f19f256 100644
--- a/app/components/tag_list_input_component/tag_list_input_controller.js
+++ b/app/components/tag_list_input_component/tag_list_input_controller.js
@@ -27,7 +27,9 @@ export default class extends Controller {
     } else {
       this.tagListTarget.value = this.tagListTarget.value.concat(`,${newTagName}`);
     }
-
+    // manualy dispatch an Input event so the change can get picked up by other controllers
+    this.tagListTarget.dispatchEvent(new InputEvent("input"))
+    
     // Create new li component with value
     const newTagElement = this.templateTarget.content.cloneNode(true);
     const spanElement = newTagElement.querySelector("span");