From aba624073680ee4fa4db4098bc991d1bb132b7f6 Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Tue, 15 Apr 2025 13:14:10 +1000
Subject: [PATCH] Per review, use css :has() pseudo class

It saves writing some custom javascript, less code to maintain!
---
 .../tag_list_input_component.html.haml          |  7 +++----
 .../tag_list_input_component.scss               |  2 +-
 .../tag_list_input_controller.js                | 14 --------------
 .../stimulus/tag_list_input_controller_test.js  | 17 +----------------
 4 files changed, 5 insertions(+), 35 deletions(-)

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 e1e4440933..52b024c25a 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
@@ -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
diff --git a/app/components/tag_list_input_component/tag_list_input_component.scss b/app/components/tag_list_input_component/tag_list_input_component.scss
index 3589f76101..67982bb022 100644
--- a/app/components/tag_list_input_component/tag_list_input_component.scss
+++ b/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;
     }
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 0c5d3c8a19..1cfa219229 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
@@ -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);
-    }
-  }
 }
diff --git a/spec/javascripts/stimulus/tag_list_input_controller_test.js b/spec/javascripts/stimulus/tag_list_input_controller_test.js
index fa535cc9f4..99205bf068 100644
--- a/spec/javascripts/stimulus/tag_list_input_controller_test.js
+++ b/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", () => {