fix ui

app/javascript/elements/toggle_classes.js

@@ -1,19 +1,23 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.addEventListener('click', this.onClick)
+  }
+
+  onClick = (event) => {
     const button = this.querySelector('a, button, label')
 
+    if (!button?.contains(event.target)) return
+
     const target = this.dataset.targetId ? document.getElementById(this.dataset.targetId) : button
 
-    button.addEventListener('click', () => {
-      this.dataset.classes.split(' ').forEach((cls) => {
-        if (this.dataset.action === 'remove') {
-          target.classList.remove(cls)
-        } else if (this.dataset.action === 'add') {
-          target.classList.add(cls)
-        } else {
-          target.classList.toggle(cls)
-        }
-      })
+    this.dataset.classes.split(' ').forEach((cls) => {
+      if (this.dataset.action === 'remove') {
+        target.classList.remove(cls)
+      } else if (this.dataset.action === 'add') {
+        target.classList.add(cls)
+      } else {
+        target.classList.toggle(cls)
+      }
     })
   }
 }