Per review, use css :has() pseudo class

It saves writing some custom javascript, less code to maintain!

app/components/tag_list_input_component/tag_list_input_component.html.haml

@@ -1,9 +1,8 @@
-- #%div{ "data-controller": "tag-list-input-component--tag-list-input" }
-%div{ "data-controller": "tag-list-input-component--tag-list-input", "data-tag-list-input-component--tag-list-input-highlight-class-value": "changed" }
-  - # We use display:none instead of hidden field, so changes to the value can be picked up by the bulkFormController 
-  = f.text_field method.to_sym, value: tags.join(","), "data-tag-list-input-component--tag-list-input-target": "tagList", "style": "display: none" 
+%div{ "data-controller": "tag-list-input-component--tag-list-input" }
   .tags-input
     .tags
+      - # We use display:none instead of hidden field, so changes to the value can be picked up by the bulkFormController 
+      = f.text_field method.to_sym, value: tags.join(","), "data-tag-list-input-component--tag-list-input-target": "tagList", "style": "display: none" 
       %ul.tag-list{"data-tag-list-input-component--tag-list-input-target": "list"}
         %template{"data-tag-list-input-component--tag-list-input-target": "template"}
           %li.tag-item

app/components/tag_list_input_component/tag_list_input_component.scss

@@ -12,7 +12,7 @@
     height: 100%;
     box-shadow: none;
 
-    &.changed {
+    &:has(.changed) {
       border: 1px solid $color-txt-changed-brd;
       border-radius: 4px;
     }

app/components/tag_list_input_component/tag_list_input_controller.js

@@ -2,7 +2,6 @@ import { Controller } from "stimulus";
 
 export default class extends Controller {
   static targets = ["tagList", "newTag", "template", "list"];
-  static values = { highlightClass: String };
 
   addTag() {
     // Check if tag already exist
@@ -24,8 +23,6 @@ export default class extends Controller {
     spanElement.innerText = newTagName;
     this.listTarget.appendChild(newTagElement);
 
-    this.#highlightList();
-
     // Clear new tag value
     this.newTagTarget.value = "";
   }
@@ -42,7 +39,6 @@ export default class extends Controller {
 
     // manualy dispatch an Input event so the change gets picked up by the bulk form controller
     this.tagListTarget.dispatchEvent(new InputEvent("input"));
-    this.#highlightList();
 
     // Remove HTML element from the list
     event.srcElement.parentElement.parentElement.remove();
@@ -59,14 +55,4 @@ export default class extends Controller {
       event.srcElement.value = event.srcElement.value.replace(",", "");
     }
   }
-
-  // private
-
-  #highlightList() {
-    if (this.highlightClassValue !== "") {
-      // div with the tags class
-      const tagsInputDiv = this.tagListTarget.nextElementSibling.firstElementChild;
-      tagsInputDiv.classList.add(this.highlightClassValue);
-    }
-  }
 }

spec/javascripts/stimulus/tag_list_input_controller_test.js

@@ -13,10 +13,7 @@ describe("TagListInputController", () => {
 
   beforeEach(() => {
     document.body.innerHTML = `
-      <div 
-        data-controller="tag-list-input-component--tag-list-input" 
-        data-tag-list-input-component--tag-list-input-highlight-class-value="changed"
-      >
+      <div data-controller="tag-list-input-component--tag-list-input">
         <input 
           value="tag 1,tag 2,tag 3" 
           data-tag-list-input-component--tag-list-input-target="tagList" 
@@ -98,12 +95,6 @@ describe("TagListInputController", () => {
       expect(variant_add_tag.value).toBe("");
     });
 
-    it("higlights the tag list", () => {
-      const tagList = document.getElementsByClassName("tags")[0];
-
-      expect(tagList.classList).toContain("changed");
-    });
-
     describe("when tag already exist", () => {
       beforeEach(() => {
         // Trying to add an existing tag
@@ -141,12 +132,6 @@ describe("TagListInputController", () => {
       // 1 template + 2 tags
       expect(tagList.childElementCount).toBe(3);
     });
-
-    it("higlights the tag list", () => {
-      const tagList = document.getElementsByClassName("tags")[0];
-
-      expect(tagList.classList).toContain("changed");
-    });
   });
 
   describe("filterInput", () => {