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

@@ -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

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

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");